Newly available 条件付きOK。主要ブラウザで対応済みだが比較的新しい機能。@supports で対応確認の上、フォールバックを提供すること。
カラー Newly available

Relative color syntax

相対カラー構文（Relative Color Syntax）は、from キーワードを使って元の色の各チャンネル値を変数として取り出し、calc() で変更できる。oklch(from var(--base) l calc(c * 0.5) h) のように、元の色の彩度だけを半分にするといった変換が CSS だけで可能。JavaScript なしで動的なカラー操作を実現する。

カラー動的

概要

相対カラー構文（Relative Color Syntax）は、from キーワードを使って元の色の各チャンネル値を変数として取り出し、calc() で変更できる。oklch(from var(--base) l calc(c * 0.5) h) のように、元の色の彩度だけを半分にするといった変換が CSS だけで可能。JavaScript なしで動的なカラー操作を実現する。

対応ブラウザ

デスクトップ

Chrome 125+
Edge 125+
Safari 18+
Firefox 128+

モバイル

Chrome Android 125+
Safari iOS 18+
Firefox Android 128+

基本構文

CSS 
/* 元の色の明度を上げる */
.lighter {
  --base: oklch(0.5 0.15 250);
  color: oklch(from var(--base) calc(l + 0.2) c h);
}

/* 彩度を下げる */
.desaturated {
  color: hsl(from var(--brand) h calc(s - 30%) l);
}

/* 色相を回転 */
.rotated {
  color: oklch(from var(--base) l c calc(h + 180));
}

/* 透明度を追加 */
.faded {
  color: rgb(from var(--text) r g b / 0.5);
}

実務での使いどころ

  • 動的なカラーバリエーション

    1つのベースカラーから明度・彩度・色相を変えたバリエーションを CSS だけで生成する。デザイントークンの管理が大幅に簡素化される。

  • インタラクティブな色変換

    ホバー時に彩度を上げる、フォーカス時に明度を変えるなどの色変換を calc() で表現する。

注意点

  • from の後に指定する色は計算済みの値に解決される必要がある。currentColor は一部の文脈で使えない場合がある。
  • 複雑なチャンネル計算はデバッグが困難。DevTools での確認を推奨。

フォールバック戦略

CSS 
/* フォールバック */
.lighter {
  color: #7799dd;
  color: oklch(from var(--base) calc(l + 0.2) c h);
}

アクセシビリティ

  • 動的に生成された色のコントラスト比が設計意図通りになっているか、さまざまなベースカラーで検証すること。

参考リンク