alpha() でカラートークンの薄い背景色を作る

どんな時に使う？

• ナビの現在ページ（aria-current="page"）や選択中の行に、ブランド色を薄くした背景を敷きたい時
• rgba(37, 99, 235, .12) のように色をベタ書きしてしまい、テーマ色を変えたら薄い版だけ古い色のまま残る、という事故を防ぎたい時
• ダークモードやテーマ切り替えで --brand を差し替えても、派生色を書き直したくない時

コード

:root {
  --brand: oklch(0.6 0.2 260);
}

.nav a[aria-current="page"] {
  color: var(--brand);
  /* 色はそのまま、透明度だけ 12% に */
  background: alpha(from var(--brand) / 12%);
}

/* 元の透明度に対して相対的に薄くすることもできる */
.badge {
  border-color: alpha(from var(--brand) / calc(alpha * 0.5));
}

• from の後ろに元の色、/ の後ろに新しい透明度を書く。数値（0.12）でもパーセント（12%）でもよい。
• / の後ろでは alpha というキーワードが元の色の透明度を表すので、calc(alpha * 0.5) で「今の半分」も書ける。
• 結果の色は元の色と同じ色空間のまま。

未対応ブラウザ向けの書き方

alpha() は 2026年9月に主要ブラウザで揃ったばかり（Chrome・Edge 152、Firefox 155、Safari 27 で Baseline Newly available）。古い環境も相手にするなら、前から使える書き方を先に置いておく。

.nav a[aria-current="page"] {
  /* フォールバック: color-mix で透明と混ぜる */
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  /* 対応ブラウザではこちらが勝つ */
  background: alpha(from var(--brand) / 12%);
}

• 相対カラー構文 rgb(from var(--brand) r g b / 12%) でも同じ結果になる。alpha() はそれを短く書ける専用版。
• PostCSS を使っているなら postcss-alpha-function で変換できる。

注意点

• 背景が半透明になるので、下に敷かれた色によって見え方が変わる。文字とのコントラストは実際の背景の上で確認すること。
• 元の色がすでに半透明だと、/ 12% は「12% に置き換え」で掛け算ではない。掛けたい時は calc(alpha * 0.12) を使う。

出典

• @sanyampunia（css tip — tint a color token with alpha()）
• 対応状況: MDN alpha()、Web features explorer