CSS 相対色構文：任意の色を動的に変換します

CSS は長い間、色を保存することができていましたが、色を操作するには JavaScript、Sass 関数、またはビルドステップが必要でした。CSS 相対色構文はこれを変えます。既存の色（変数、キーワード、または任意の色値から）を取得し、スタイルシート内で特定のチャネルを直接変換できます。明るくしたり、色相をシフトしたり、彩度を下げたり、透明度を調整したり、純粋な CSS、ランタイムですべてが可能です。

この機能は Chrome 119、Firefox 128、Safari 16.4 に実装され、2026 年の本番環境での使用に十分なブラウザ浸透率を備えています。すべての最新 CSS カラー関数で機能します：rgb()、hsl()、oklch()、lab()、lch() など。

相対色構文とは

相対色構文は任意の CSS カラー関数を from <color> 句で拡張します。これはブラウザに対して、元の色を分解し、それらのチャネルを使用して新しい色を再構成するように指示します。おそらく変更を加えて。

最も基本的な例では from キーワードを使用して、色を変更なしに渡します：

/* これは無操作です —— 入力と同じ色を生成します */
color: oklch(from #3B82F6 l c h);

それだけでは非常に役に立ちませんが、抽出されたチャネル値を変更するときに真の力が出ます：

/* L（明度）を増やして明るくします */
color: oklch(from #3B82F6 calc(l + 0.15) c h);

/* 色相を 30 度シフト */
color: oklch(from #3B82F6 l c calc(h + 30));

/* 彩度を減らして脱飽和 */
color: oklch(from #3B82F6 l calc(c * 0.5) h);

/* 半透明にします */
color: oklch(from #3B82F6 l c h / 0.5);

これらの各変換は単一のチャネルを変換し、他のチャネルはそのままです —— これは以前はプリプロセッサなしの純粋な CSS では不可能でした。

`from` キーワード

from キーワードは相対色構文の構文的な中心です。カラー関数の開き括弧の直後、チャネル値の前に現れます：

color-function(from <origin-color> <channel1> <channel2> <channel3> [/ <alpha>])

<origin-color> は任意の有効な CSS 色値です：

/* 16 進数コードから */
oklch(from #FF5733 l c h)

/* 名前付き色から */
oklch(from tomato l c h)

/* CSS カスタムプロパティから */
oklch(from var(--brand-color) l c h)

/* 別のカラー関数から */
oklch(from rgb(59, 130, 246) l c h)

/* currentColor から */
oklch(from currentColor l c h)

from currentColor バリアントは特に強力です —— コンポーネントが継承されたテキスト色を正確な値を知らずに変換することができます。

カラー関数別のチャネル名

各カラー関数は from キーワード後の特定の名前でチャネルを公開します：

関数	チャネル 1	チャネル 2	チャネル 3	アルファ
`oklch()`	`l`	`c`	`h`	`alpha`
`oklab()`	`l`	`a`	`b`	`alpha`
`hsl()`	`h`	`s`	`l`	`alpha`
`rgb()`	`r`	`g`	`b`	`alpha`
`lab()`	`l`	`a`	`b`	`alpha`
`lch()`	`l`	`c`	`h`	`alpha`

hsl() では、from 分解のチャネル順序は関数シグネチャを反映します：h、s、l。oklch() では l、c、h です。使用している関数のチャネル順序を常に確認してください。

クロス関数変換

元の色は出力関数と一致する必要はありません。ブラウザは自動的に変換します：

/* 入力は 16 進数、出力は oklch —— ブラウザは最初に変換してから分解 */
oklch(from #FF5733 calc(l + 0.1) c h)

/* 入力は hsl、出力は rgb */
rgb(from hsl(200, 80%, 50%) calc(r * 0.9) g b)

このクロス関数変換は、デザイントークンを任意の形式で保存し、操作に好む形式の出力を生成できることを意味します。

個別チャネルの調整

相対色での最も一般的な操作は calc() を使用して抽出されたチャネル値を変更することです。

明度調整（OKLCH）

OKLCH では、l チャネルは 0（黒）から 1（白）の範囲です。固定値を加算または減算すると、OKLCH 明度は知覚的に均一なため、予測可能に明るいまたは暗い結果が生成されます：

:root {
  --base: oklch(0.58 0.20 250);
}

.lighter  { color: oklch(from var(--base) calc(l + 0.15) c h); }
.lightest { color: oklch(from var(--base) calc(l + 0.30) c h); }
.darker   { color: oklch(from var(--base) calc(l - 0.15) c h); }
.darkest  { color: oklch(from var(--base) calc(l - 0.30) c h); }

OKLCH 明度は知覚的に調整されているため、l に 0.15 を追加すると、色の色相に関係なく同じ大きさの知覚される明るさのジャンプが生成されます —— HSL とは異なり、同じインクリメントは黄色と青色かどうかで見た目が異なります。

彩度調整

c チャネルは色の強度を制御します。0 に設定すると、同じ明度でニュートラルグレーが生成されます。減少させると、完全にグレー化せずに脱飽和します：

/* ミュートバリアント —— 彩度が 50% 少なくなります */
color: oklch(from var(--brand) l calc(c * 0.5) h);

/* 同じ明度での完全に脱飽和グレー */
color: oklch(from var(--brand) l 0 h);

/* より鮮やか —— 彩度が 30% 増加（一部の色相で sRGB ガマットから外れる場合があります） */
color: oklch(from var(--brand) l calc(c * 1.3) h);

色相シフト

h チャネルは 0 から 360 の度数値です。加算または減算すると、色相輪周辺の色相がシフトします：

/* 補色 —— 輪の反対側 */
color: oklch(from var(--brand) l c calc(h + 180));

/* 類似色 +30° */
color: oklch(from var(--brand) l c calc(h + 30));

/* 類似色 -30° */
color: oklch(from var(--brand) l c calc(h - 30));

複数のチャネル調整を組み合わせると、単一の宣言で複雑な変換が作成されます：

/* より明るく、より落ち着き、わずかに異なる色相 —— トーンバリアント */
color: oklch(from var(--brand) calc(l + 0.12) calc(c * 0.6) calc(h + 15));

アルファチャネル

スラッシュ構文を使用して透明度を変更します：

/* ブランド色の 50% 不透明版 */
background: oklch(from var(--brand) l c h / 0.5);

/* 透明度がある可能性のある色の完全に不透明なバージョン */
color: oklch(from var(--text-muted) l c h / 1);

/* 既存のアルファをスケール —— 元が 0.8 不透明性の場合、約 0.4 に減少 */
background: oklch(from var(--overlay) l c h / calc(alpha * 0.5));

純粋な CSS でのティントとシェードの作成

色スケールへの従来のアプローチは、すべてのシェードを事前計算して変数として保存する必要があります。相対色構文を使用すれば、単一の基本変数から目全体のスケールを生成できます：

:root {
  --primary: oklch(0.58 0.20 250);

  /* スケール —— 事前計算は不要です */
  --primary-50:  oklch(from var(--primary) 0.97 calc(c * 0.1) h);
  --primary-100: oklch(from var(--primary) 0.94 calc(c * 0.2) h);
  --primary-200: oklch(from var(--primary) 0.88 calc(c * 0.4) h);
  --primary-300: oklch(from var(--primary) 0.78 calc(c * 0.6) h);
  --primary-400: oklch(from var(--primary) 0.68 calc(c * 0.8) h);
  --primary-500: var(--primary);
  --primary-600: oklch(from var(--primary) calc(l - 0.08) c h);
  --primary-700: oklch(from var(--primary) calc(l - 0.16) c h);
  --primary-800: oklch(from var(--primary) calc(l - 0.24) c h);
  --primary-900: oklch(from var(--primary) calc(l - 0.32) c h);
  --primary-950: oklch(from var(--primary) calc(l - 0.38) c h);
}

--primary を任意の色に変更すると、目全体の 11 ステップスケールがブラウザで自動的に再生成されます。ビルドステップなし、JavaScript なし、Sass なし。

本番環境のデザインシステムの場合、シェードジェネレータは手動で調整された 50～950 スケールを提供します。相対色アプローチは、正確なステップが正確さより柔軟性が重要な小規模コンポーネントまたは迅速なプロトタイピングに理想的です。

アクセス可能な背景のティント

通知バナーとアラートボックス用の非常に薄い色付き背景を作成するための一般的なパターン：

:root {
  --success: oklch(0.65 0.20 145);  /* 鮮やかな緑 */
  --warning: oklch(0.75 0.18 70);   /* 暖かい琥珀色 */
  --danger:  oklch(0.62 0.24 25);   /* 強い赤 */
}

.alert-success {
  background: oklch(from var(--success) 0.96 0.04 h);
  border-left: 3px solid var(--success);
  color: oklch(from var(--success) 0.30 0.14 h);
}

.alert-warning {
  background: oklch(from var(--warning) 0.97 0.04 h);
  border-left: 3px solid var(--warning);
  color: oklch(from var(--warning) 0.35 0.14 h);
}

.alert-danger {
  background: oklch(from var(--danger) 0.96 0.04 h);
  border-left: 3px solid var(--danger);
  color: oklch(from var(--danger) 0.32 0.14 h);
}

背景は、警告色の非常に高い明度、低彩度バージョンです。テキストは非常に暗く、適度に飽和したバージョンを使用します。色相（h）は元の色からすべての場合で保持されます —— すべてが色相で自動的に保持されます。

OKLCH を使用した実際の例

テーマ適応型ホバー状態

.card {
  --card-accent: oklch(0.60 0.18 260);
  background: var(--card-accent);
  transition: background-color 150ms ease;
}

.card:hover {
  /* ホバー時にわずかに暗くします —— アクセントが何であるかに関係なく機能します */
  background: oklch(from var(--card-accent) calc(l - 0.06) c h);
}

このパターンは、アクセント色が prop またはカスタムプロパティとして渡されるコンポーネントライブラリで特に強力です。ホバー状態は、すべてのバリアント用に個別のホバー色を必要とせず、常に文脈的に適切です。

色付き背景のテキスト

.chip {
  --chip-color: oklch(0.62 0.20 260);

  /* 背景：非常に薄い色合い */
  background: oklch(from var(--chip-color) 0.94 0.06 h);

  /* テキスト：同じ色相の非常に暗いバージョン */
  color: oklch(from var(--chip-color) 0.28 0.16 h);

  /* 枠線：中程度から薄いバージョン */
  border: 1px solid oklch(from var(--chip-color) 0.78 0.12 h);
}

これは、背景、テキスト、枠線がすべて調和している色付きチップを生成します。これらは同じ色相を共有しているためです。--chip-color を変更して、目全体のセットを更新します。

`from currentColor` を使用したダークモード適応

.icon-wrapper {
  /* アイコン色がテキストコンテキストから継承されます */
  color: var(--color-text-primary);
}

.icon-wrapper:hover {
  /* アイコンが現在いる色の微妙に暗いバージョン */
  color: oklch(from currentColor calc(l - 0.08) c h);
}

.icon-wrapper .background-glow {
  /* グロー効果用のアイコン色の半透明版 */
  background: oklch(from currentColor l c h / 0.15);
}

currentColor 元は、このコンポーネントがダークモードを含む任意のテキスト色コンテキストで正しく機能することを意味します。具体的な色値を知る必要がありません。

補色アクセントの生成

プライマリブランド色から派生した補色アクセント色を必要とするデザインの場合：

:root {
  --brand: oklch(0.60 0.20 250);   /* ブルー */

  /* 補色：反対の色相、同じ明度と彩度 */
  --accent: oklch(from var(--brand) l c calc(h + 180));
  /* 結果：約 70° の色相で約オレンジ */

  /* 背景用のより柔らかい補色 */
  --accent-bg: oklch(from var(--brand) 0.95 0.06 calc(h + 180));
}

これは数学的に補色を生成します。より洗練された分割補色スキームの場合、180° ではなく ±150° または ±160° でオフセットします。

ブラウザサポートとフォールバック

相対色構文は以下でサポートされています：

Chrome/Edge：バージョン 119 以降（2023 年 11 月）
Firefox：バージョン 128 以降（2024 年 7 月）
Safari：バージョン 16.4 以降（2023 年 3 月）—— Safari が最初に配信

グローバルサポートは 2026 年初現在、約 85～88% です。より広いカバレッジの場合、フォールバックを提供します：

.btn-hover {
  /* フォールバック：古いブラウザ用の事前計算 16 進数 */
  background-color: #1D4ED8;
}

@supports (color: oklch(from red l c h)) {
  .btn-hover {
    /* モダン：ベースから動的に派生 */
    background-color: oklch(from var(--btn-bg) calc(l - 0.08) c h);
  }
}

@supports テスト (color: oklch(from red l c h)) は、OKLCH サポートだけでなく、相対色構文サポートを具体的にチェックします。これは重要です。OKLCH と相対色構文はブラウザの異なるバージョンで出荷されているためです。

重要なポイント

相対色構文は、任意の CSS カラー関数内で from <origin-color> を使用して、その色をチャネルに分解し、calc() で変更して新しい色に再構成できます。
OKLCH は相対色操作に最適な関数です。チャネル（明度、彩度、色相）がデザイン意図に密接にマップされ、明度は知覚的に均一なため、等しいインクリメントが等しく見える変化を生成するためです。
任意の単一チャネルを個別に調整できます：l に追加して明るく、c を乗算して脱飽和、h に追加して色相をシフト、または alpha を変更して透明度を変更します。
from currentColor 元は自己適応型コンポーネントを作成し、継承されたテキスト色から色を派生させ、ダークモードを含む任意のコンテキストで自動的に正しくします。
ブラウザサポートは 2023 年後半～2024 年中盤以降すべての最新ブラウザをカバーしています。相対色構文のサポートを具体的に検出するには @supports (color: oklch(from red l c h)) を使用します。
本番環境のデザインシステムではシェードジェネレータを使用して、正確で手動で調整された 50～950 スケールを取得します。相対色構文は、コンポーネント内の動的なランタイム派生バリアント用です。
カラーコンバータを使用して、既存の 16 進数ブランド色を OKLCH 値に変換して、相対色式を作成する前に l、c、h チャネルを理解します。

CSS 相対色構文：任意の色を動的に変換します

Embed This Widget

相対色構文とは

`from` キーワード

カラー関数別のチャネル名

クロス関数変換

個別チャネルの調整

明度調整（OKLCH）

彩度調整

色相シフト

アルファチャネル

純粋な CSS でのティントとシェードの作成

アクセス可能な背景のティント

OKLCH を使用した実際の例

テーマ適応型ホバー状態

色付き背景のテキスト

`from currentColor` を使用したダークモード適応

補色アクセントの生成

ブラウザサポートとフォールバック

重要なポイント

関連カラー

関連ブランド

関連ツール

カラーコンバーター

シェードジェネレーター

相対色構文とは

from キーワード

カラー関数別のチャネル名

クロス関数変換

個別チャネルの調整

明度調整（OKLCH）

彩度調整

色相シフト

アルファチャネル

純粋な CSS でのティントとシェードの作成

アクセス可能な背景のティント

OKLCH を使用した実際の例

テーマ適応型ホバー状態

色付き背景のテキスト

from currentColor を使用したダークモード適応

補色アクセントの生成

ブラウザサポートとフォールバック

重要なポイント

関連カラー

関連ブランド

関連ツール

カラーコンバーター

シェードジェネレーター

`from` キーワード

`from currentColor` を使用したダークモード適応