OKLCH色指定について

OKLCHの概要

OKLCH（Oklch）は、人間の視覚に基づいた色空間で、従来のHSLやRGBよりも直感的で一貫性のある色指定が可能です。

読み方：オーケーエルシーエイチ（※諸説あり）

L：明るさ（Lightness）

C：彩度（Chroma）

H：色相（Hue）

これらを、現代のディスプレイ環境でOK=良い感じにしたもの。

OKLCHの利点

1. 知覚的に均一

同じ明度値であれば、どの色相でも同じ明るさに見えます。

2. 予測可能な色調整

明度や彩度の調整が直感的で、期待通りの結果が得られます。

3. 広い色域

Display P3など、現代のディスプレイが表示できる豊富な色を表現可能です。

基本的な使用方法

/* OKLCH記法 */
.primary-color {
  color: oklch(0.7 0.15 250);
  /* 明度: 0.7, 彩度: 0.15, 色相: 250° */
}

/* 透明度を含む場合 */
.primary-color-alpha {
  color: oklch(0.7 0.15 250 / 0.8);
}

/* CSS変数との組み合わせ */
:root {
  --primary-l: 0.7;
  --primary-c: 0.15;
  --primary-h: 250;
}

.primary {
  color: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
}

デザインシステムでの活用

色のバリエーション生成

:root {
  /* ベース色の定義 */
  --blue-h: 250;
  --blue-c: 0.15;
  
  /* 明度のバリエーション */
  --blue-50: oklch(0.95 var(--blue-c) var(--blue-h));
  --blue-100: oklch(0.9 var(--blue-c) var(--blue-h));
  --blue-500: oklch(0.7 var(--blue-c) var(--blue-h));
  --blue-900: oklch(0.3 var(--blue-c) var(--blue-h));
}

アクセシブルな色の組み合わせ

/* 十分なコントラスト比を持つ組み合わせ */
.accessible-text {
  background: oklch(0.95 0.02 250);
  color: oklch(0.25 0.1 250);
}

ブラウザサポート

OKLCH color model | Can I use

対応状況

Chrome 111+
Firefox 113+
Safari 15.4+

フォールバック方法

.color-element {
  /* フォールバック */
  color: #4a90e2;
  
  /* OKLCHをサポートするブラウザ */
  color: oklch(0.7 0.15 250);
}

/* @supportsを使用 */
@supports (color: oklch(0 0 0)) {
  .modern-color {
    color: oklch(0.7 0.15 250);
  }
}

実用例

テーマシステム

:root {
  --theme-primary-h: 250;
  --theme-primary-c: 0.15;
}

[data-theme="light"] {
  --bg: oklch(0.98 0.02 var(--theme-primary-h));
  --text: oklch(0.2 0.05 var(--theme-primary-h));
}

[data-theme="dark"] {
  --bg: oklch(0.15 0.02 var(--theme-primary-h));
  --text: oklch(0.9 0.05 var(--theme-primary-h));
}

まとめ

OKLCHは現代的なWeb開発において、より正確で予測可能な色指定を可能にします。適切なフォールバックを用意することで、今すぐ実用的に活用できます。