T
css colors oklch color-mix design

モダン CSS カラーガイド：OKLCH、color-mix()、そしてウェブデザインの未来

次世代の CSS カラーを探索。OKLCH、color-mix()、LCH、および相対カラー構文の完全ガイド。

2026-04-12

モダン CSS カラーガイド：OKLCH、color-mix()、そしてウェブデザインの未来

色はウェブデザインの魂ですが、何十年もの間、私たちは sRGB や、RGB や HSL のような知覚的ではない色空間の制限に囚われてきました。モダン CSS はこれらの境界を打ち破り、高解像度で知覚的に均一、かつダイナミックなカラーシステムの新時代を切り開きました。

このガイドでは、CSS での色定義と操作の方法を変えつつある、革新的なカラー関数と機能について詳しく解説します。

2. color-mix() によるダイナミックな操作

CSS への最も強力な新機能の 1 つは color-mix() 関数です。これにより、スタイルシート内で 2 つの色を直接混合できるため、複雑な Sass 計算や JavaScript の必要がなくなります。

構文：color-mix(in [色空間], [色 1] [パーセンテージ], [色 2] [パーセンテージ])

例：インスタントなホバー状態の作成

.button {
  background: var(--primary-color);
}

.button:hover {
  /* プライマリカラーに 20% の白を混ぜる */
  background: color-mix(in oklch, var(--primary-color), white 20%);
}

oklch や oklab 空間での混合は、通常、RGB での混合よりもはるかに自然な結果をもたらします。

3. LCH と LAB のマスター

OKLCH はその直感性から一般的に好まれますが、LCH と LAB がその基盤です。

  • LAB：座標系を使用します（L は明度、a は赤緑軸、b は青黄軸）。
  • LCH：LAB の極座標バージョンです（明度、彩度、色相）。

これらの空間はデバイスに依存せず、人間が見ることができるすべての色を表現できます。これらは、モダンなブラウザが内部で色を処理する際の「ネイティブ」な方法です。

4. color() 関数と Display-P3

color() 関数は、display-p3、a98-rgb、prophoto-rgb などの特定の色彩空間にアクセスするための汎用的な方法です。

/* 広色域 P3 空間へのアクセス */
.p3-green {
  color: color(display-p3 0 1 0); /* 最も純粋な P3 グリーン */
}

デバイスが指定された空間をサポートしていない場合、CSS は自動的に最も近い sRGB 相当にフォールバックします。

5. light-dark() によるテーマへの適応

ダークモードが標準的な要件になるにつれ、light-dark() 関数はテーマの切り替えを簡素化します。ユーザーのシステム設定に基づいて、ライトモードには最初の値を、ダークモードには 2 番目の値を自動的に選択します。

body {
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #efefef);
}

6. 相対カラー構文 (RCS)

相対カラー構文（Relative Color Syntax）は、おそらく最も高度なカラー機能です。既存の色を「分解」し、そのコンポーネントの 1 つを変更して、新しい色を 1 行で作成できます。

/* 既存の色を取得し、その不透明度や明度を変更する */
.card {
  --base-color: #3498db;
  background: oklch(from var(--base-color) 80% c h); /* 明度を 80% に上げる */
  border-color: oklch(from var(--base-color) l c h / 0.5); /* 色を保ち、50% の不透明度を追加 */
}

モダン CSS カラー関数のまとめ

関数 最適な用途 サポート状況
oklch() 知覚的に均一なデザイン、アクセシブルなパレット モダンブラウザ
color-mix() 色の混合（ホバーステート、オーバーレイ） モダンブラウザ
light-dark() 簡単なダークモード対応 最新（サポート要確認）
RCS 変数からの色の派生 登場中

結論

モダン CSS は、色を静的な値からダイナミックでプログラム可能なシステムに変えました。精度のための OKLCH と柔軟性のための color-mix() を活用することで、より美しく、かつアクセシブルでパフォーマンスの高いウェブ体験を構築できます。

デザインをアップグレードする準備はできましたか？当サイトの カラーコンバーター をお試しください。近日公開予定の OKLCH カラーピッカー と CSS カラーミックスジェネレーター もお楽しみに！

ブログに戻る