T
css color oklch web-design frontend

モダン CSS カラー関数完全ガイド：OKLCH、color-mix()、そしてその先へ

OKLCH、color-mix()、相対カラー構文などのモダン CSS カラー関数をマスターしましょう。アクセシブルなウェブデザインにおいて、なぜ OKLCH が RGB/HSL より優れているのかを解説します。

2026-04-18 このツールを使う

モダン CSS カラー関数完全ガイド：OKLCH、color-mix()、そしてその先へ

ウェブにおける色の定義方法は、今まさに大きな変革期を迎えています。何十年もの間、開発者は rgb() や hex コードに頼り、後に人間にとっての読みやすさを求めて hsl() を採用してきました。しかし、ディスプレイ技術の進化（HDR や広色域スクリーンの登場）や、アクセシビリティが核心的な要件となる中で、これらの古いモデルは限界を露呈し始めています。

そこで登場したのが、新世代の CSS カラー関数です：OKLCH、color-mix()、そして相対カラー構文 (Relative Color Syntax)。これらのツールは、単なる「古いことを新しい方法でやる」ためのものではありません。色彩理論とウェブアクセシビリティにおける根本的な問題を解決するものです。

1. なぜ OKLCH が新しい標準なのか

HSL を使って一貫性のあるカラーパレットを作ろうとしたとき、ある問題に気づいたことはありませんか？同じ明度（Lightness）値を持つ異なる色相でも、人間の目には同じ明るさに見えないという問題です。例えば、明度 50% の「純粋な青」と「純粋な黄色」では、見た目の明るさが大きく異なります。

OKLCH の知覚的一貫性

OKLCH は以下の略です：

  • O: Oklab（ベースとなっている色空間）
  • L: Lightness（知覚的な明るさ）
  • C: Chroma（彩度、色の鮮やかさや強さ）
  • H: Hue（色相、色相環上の角度）

OKLCH の「K」は、知覚的一貫性 (Perceptual Uniformity) を指します。これは、明度 (L) を一定に保ちながら色相 (H) を変更しても、人間の目には同じ明るさに見え続けることを意味します。

コード例：

.button-primary {
  /* 美しく、知覚的にバランスの取れた青 */
  background-color: oklch(60% 0.15 250);
}

.button-secondary {
  /* 全く同じ知覚的明るさを維持したまま、色相だけを変更 */
  background-color: oklch(60% 0.15 20);
}

OKLCH のメリット：

  1. P3 色域のサポート: 標準的な sRGB (RGB/HEX) よりも 50% 多い色にアクセス可能。
  2. デザインシステムの簡素化: 明度値を調整するだけで、アクセシブルなテーマを簡単に作成。
  3. 「くすみ」がない: HSL と異なり、調整しても色が鮮やかなまま保たれる。

2. color-mix() による動的な色の混合

color-mix() 関数を使用すると、CSS 内で直接 2 つの色を混合できます。以前は Sass のようなプリプロセッサや JavaScript ライブラリが必要だった機能です。

構文： color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)

実用的なユースケース：ホバーステート

:root {
  --brand-color: #3b82f6;
}

.btn:hover {
  /* ブランドカラーに 20% の白を混ぜて、完璧なティントを作成 */
  background-color: color-mix(in oklab, var(--brand-color), white 20%);
}

oklab 空間で色を混ぜると、RGB 混合でよく見られる「濁り」を避け、最も自然に見える結果が得られます。

3. 相対カラー構文：色操作の未来

相対カラー構文 (RCS) は、おそらく CSS カラーにおける最も強力な追加機能です。既存の色を取り込み、それを分解し、コンポーネントを修正して、再び組み立てることができます。

構文例：

.alert {
  --base-color: blue;
  /* 'blue' を元に、色相と彩度は維持しつつ、明度を 90% に設定 */
  background-color: oklch(from var(--base-color) 0.9 c h);
  /* オリジナルの色に対して相対的なアルファチャンネルを設定 */
  color: oklch(from var(--base-color) l c h / 0.8);
}

これにより、すべての CSS カラー変数が、何十もの個別の変数を用意することなく、独自のバリエーション（ティント、シェード、透明版）の「工場」となります。

4. 広色域カラー (Display-P3)

最新のスマートフォンやラップトップ（MacBook やハイエンドの Android など）の多くは、広色域 (Wide Gamut) ディスプレイをサポートしています。従来の CSS カラーは sRGB 空間に制限されているため、それらの画面が表現できる最も鮮やかな緑、赤、オレンジを表示することができません。

color() 関数で display-p3 を使用することで、これらの「HD」カラーを解き放つことができます。

.neon-green {
  /* この緑は標準の HEX/RGB では表現不可能です */
  color: color(display-p3 0 1 0);
}

5. light-dark() によるより良いダークモード

新しい light-dark() 関数は、ユーザーのシステム設定に基づいて自動的に適切な値を選択することで、テーマの実装を簡素化します。

body {
  /* 単純な色のために、複雑な @media (prefers-color-scheme) ブロックを書く必要はもうありません */
  background-color: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#333333, #efefef);
}

FAQ：よくある質問

Q: なぜ HSL ではなく OKLCH を使うべきなのですか？

A: HSL は知覚的に一貫していません。HSL で明度を 50% に保ったまま色相を変更すると、明るさが激しく変動して見えます。OKLCH はこれを修正し、アクセシブルなデザインシステムや一貫性のある UI コンポーネントの構築をはるかに容易にします。

Q: OKLCH はすべてのブラウザでサポートされていますか？

A: 2024 年現在、OKLCH、color-mix()、および相対カラー構文は、主要なエバーグリーンブラウザ（Chrome、Firefox、Safari、Edge）すべてでサポートされています。古いブラウザに対しては、HEX フォールバックを提供する必要があります。

Q: 色を混ぜるのに最適な色空間は何ですか？

A: ほとんどの UI タスクにおいて、color-mix() の補間空間としては oklab または oklch が最適です。これらは、sRGB で頻繁に発生するグラデーションや混合の中間の「灰色のデッドゾーン」を回避します。

試してみる準備はできましたか？

モダン CSS は、デザインツールをより強力にし、コードのメンテナンス性を向上させています。当サイトの カラーコンバーター を使用して、あなたのブランドカラーが異なる形式でどのように見えるかを確認してみてください。

注：現在、専用の OKLCH カラーピッカーと相対カラー構文ジェネレーターを開発中です。ご期待ください！

ブログに戻る カラー変換器 →