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

Relative color syntax

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

カラー動的

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.calc.color_component
119
119
128
16.4
119
16.4
CSS タイプ
color.relative syntax

相対 `color()` 構文
119
119
128
18
119
18
hsl.relative syntax

相対的な HSL カラー
125
125
128
18
125
18
hwb.relative syntax

相対的な HWB カラー
125
125
128
18
125
18
lab.relative syntax

相対的なラボカラー
119
119
128
16.4
119
16.4
lch.relative syntax

相対的な LCH カラー
119
119
128
18
119
18
oklab.relative syntax

Oklab の相対色
122
122
128
16.4
122
16.4
oklch.relative syntax

オクルヒの相対色
122
122
128
18
122
18
rgb.relative syntax

相対RGBカラー
122
122
128
18
122
18
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値を使用した計算は正しく機能せず、値を単位付きのパーセンテージ (`%`) として指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値を使用した計算は正しく機能せず、値を単位付きのパーセンテージ (`%`) として指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • 「s」と「l」のチャネル値は、0 ～ 100 ではなく、0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、「s」と「l」の値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、20% の場合は 0.2)。 バグ 330096624 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • 「s」と「l」のチャネル値は、0 ～ 100 ではなく、0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、「s」と「l」の値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、20% の場合は 0.2)。 バグ 330096624 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値を使用した計算は正しく機能せず、値を単位 (「h」の場合は「deg」、「s」および「l」の場合は「%」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • 「s」と「l」のチャネル値は、0 ～ 100 ではなく、0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、「s」と「l」の値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、20% の場合は 0.2)。 バグ 330096624 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値を使用した計算は正しく機能せず、値を単位 (「h」の場合は「deg」、「s」および「l」の場合は「%」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • 「w」および「b」チャネル値は、0 ～ 100 ではなく 0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、「w」および「b」の値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、20% の場合は 0.2)。 バグ 330096624 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • 「w」および「b」チャネル値は、0 ～ 100 ではなく 0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、「w」および「b」の値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、20% の場合は 0.2)。 バグ 330096624 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値を使用した計算は正しく機能せず、値を単位 (「h」の場合は「deg」、「w」および「b」の場合は「%」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (125)
実装メモ
  • 「w」および「b」チャネル値は、0 ～ 100 ではなく 0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、「w」および「b」の値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、20% の場合は 0.2)。 バグ 330096624 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値を使用した計算は正しく機能せず、値を単位 (「h」の場合は「deg」、「w」および「b」の場合は「%」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、「h」チャネル値を使用した計算は正しく機能せず、値を単位 (「deg」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、「h」チャネル値を使用した計算は正しく機能せず、値を単位 (「deg」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • 「l」チャネル値は、0 ～ 1 ではなく、0 ～ 100 の数値に誤って解決されます。 その結果、チャネル値の計算では、「l」値を単位のないパーセンテージ数値として指定する必要があります (たとえば、0.2 の場合は 20)。 バグ 40940488 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • 「l」チャネル値は、0 ～ 1 ではなく、0 ～ 100 の数値に誤って解決されます。 その結果、チャネル値の計算では、「l」値を単位のないパーセンテージ数値として指定する必要があります (たとえば、0.2 の場合は 20)。 バグ 40940488 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • 「l」チャネル値は、0 ～ 1 ではなく、0 ～ 100 の数値に誤って解決されます。 その結果、チャネル値の計算では、「l」値を単位のないパーセンテージ数値として指定する必要があります (たとえば、0.2 の場合は 20)。 バグ 40940488 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • 「l」チャネル値は、0 ～ 1 ではなく、0 ～ 100 の数値に誤って解決されます。 その結果、チャネル値の計算では、「l」値を単位のないパーセンテージ数値として指定する必要があります (たとえば、0.2 の場合は 20)。 バグ 40940488 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • 「l」チャネル値は、0 ～ 1 ではなく、0 ～ 100 の数値に誤って解決されます。 その結果、チャネル値の計算では、「l」値を単位のないパーセンテージ数値として指定する必要があります (たとえば、0.2 の場合は 20)。 バグ 40940488 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、「h」チャネル値を使用した計算は正しく機能せず、値を単位 (「deg」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • 「l」チャネル値は、0 ～ 1 ではなく、0 ～ 100 の数値に誤って解決されます。 その結果、チャネル値の計算では、「l」値を単位のないパーセンテージ数値として指定する必要があります (たとえば、0.2 の場合は 20)。 バグ 40940488 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、「h」チャネル値を使用した計算は正しく機能せず、値を単位 (「deg」) で指定する必要があります。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • チャネル値が、0 ～ 255 ではなく 0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、30% の場合は 0.3、これは 76.5 `<number>` 値に相当します)。 バグ 41490327 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • チャネル値が、0 ～ 255 ではなく 0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、30% の場合は 0.3、これは 76.5 `<number>` 値に相当します)。 バグ 41490327 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値の計算が正しく機能せず、値を単位付きのパーセンテージとして指定する必要があります (例: 30%、これは 76.5 `<number>` 値に相当します)。 バグ 267647 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (122)
実装メモ
  • チャネル値が、0 ～ 255 ではなく 0 ～ 1 の数値に誤って解決されます。 その結果、チャネル値の計算では、値を 10 進数のパーセンテージに相当するものとして指定する必要があります (たとえば、30% の場合は 0.3、これは 76.5 `<number>` 値に相当します)。 バグ 41490327 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18)
実装メモ
  • 古い仕様バージョンに基づいて実装されています。 その結果、チャネル値の計算が正しく機能せず、値を単位付きのパーセンテージとして指定する必要があります (例: 30%、これは 76.5 `<number>` 値に相当します)。 バグ 267647 を参照してください。

基本構文

CSS 
/* Increase the brightness of the original color */
.lighter {
  --base: oklch(0.5 0.15 250);
  color: oklch(from var(--base) calc(l + 0.2) c h);
}

/* Reduce saturation */
.desaturated {
  color: hsl(from var(--brand) h calc(s - 30%) l);
}

/* Rotate hue */
.rotated {
  color: oklch(from var(--base) l c calc(h + 180));
}

/* Add opacity */
.faded {
  color: rgb(from var(--text) r g b / 0.5);
}

ライブデモ

lightnessbarie-tion

Relative color syntax lightnessbarie-tion demo.

プレビュー全画面表示

Colorphaserotate

Relative color syntax Colorphaserotate demo.

プレビュー全画面表示

opacityadd

Relative color syntax opacityadd demo.

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

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

フォールバック戦略

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

アクセシビリティ

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

参考リンク