Relative Color Syntax — color-mix() の姉妹機能

color-mix() では足りないとき

color-mix() は 2 つ の色を補間します。一部の操作は 1 つ の 色を特定の軸に沿って操作する必要があります — 明度を上げる、彩度を半分に する、色相を回転させる、など。これが Relative Color Syntax (RCS) の 役割です：

:root {
  --brand: oklch(0.62 0.21 254);
}

.lighter { color: oklch(from var(--brand) calc(l + 0.1) c h); }
.muted   { color: oklch(from var(--brand) l calc(c * 0.5) h); }
.shifted { color: oklch(from var(--brand) l c calc(h + 30)); }

from キーワードがソース色をスコープに持ち込み、そのチャネル (OKLCH なら l, c, h、RGB なら r, g, b) を露出させ、 calc() で変換できるようにします。

color-mix() ではなく RCS を選ぶとき

用途	使うもの
2 色を平均化	color-mix()
明度を 10% 上げる	RCS
色相回転で 5 色パレットを生成	RCS
白でティント	color-mix()
カスタム色のアルファを半分に	RCS (oklch(from c l c h / calc(alpha * 0.5)))

2 つを組み合わせる

ネストできます：

.combo {
  background: color-mix(
    in oklch,
    oklch(from var(--brand) calc(l + 0.1) c h),
    white 30%
  );
}

これはまず --brand のより明るいバージョンを生成し、その結果に 30% の白を混ぜます。

ブラウザサポート

Relative Color Syntax は color-mix() より少し遅れて出荷されました。 Chrome 119+、Safari 16.4+、Firefox 128+ でサポートされています。 古いブラウザを対象にする場合はフォールバックや機能検出と組み合わせて ください。