CSS OKLCH カラー活用ガイド - 知覚的に均一な色空間で実現する次世代カラーデザイン

CSS の色指定は、長年 RGB や HSL が主流でしたが、2023年以降、主要ブラウザで OKLCH カラーモデルのサポートが進んでいます。OKLCH は知覚的に均一な色空間を提供し、より直感的で美しいカラーパレットの作成を可能にします。

この記事では、OKLCH カラーモデルの基本から、実践的な活用方法まで詳しく解説します。

OKLCH とは

OKLCH は Oklab 色空間をベースにした円柱座標系のカラーモデルです。

OKLCH の3つの要素

oklch(L C H)
  • L (Lightness): 明度 (0% = 黒, 100% = 白)
  • C (Chroma): 彩度 (0 = 無彩色, 値が大きいほど鮮やか)
  • H (Hue): 色相 (0〜360度の角度)

従来の色空間との違い

HSL の問題点:

/* 同じ明度50%でも、人間の目には異なる明るさに見える */
hsl(0, 100%, 50%)   /* 赤 - 暗く見える */
hsl(60, 100%, 50%)  /* 黄色 - 明るく見える */
hsl(240, 100%, 50%) /* 青 - かなり暗く見える */

OKLCH の利点:

/* 同じ明度なら、色相が変わっても同じ明るさに見える */
oklch(50% 0.2 0)    /* 赤 */
oklch(50% 0.2 60)   /* 黄色 */
oklch(50% 0.2 240)  /* 青 */

ブラウザサポート

2025年2月現在、主要ブラウザでサポートされています。

/* フォールバック付きの安全な使用法 */
.element {
  background: #3b82f6; /* フォールバック */
  background: oklch(65% 0.2 250);
}

サポート状況の確認

@supports (color: oklch(0% 0 0)) {
  .element {
    background: oklch(70% 0.15 280);
  }
}

基本的な使い方

色の指定

/* 基本形 */
color: oklch(60% 0.15 200);

/* アルファ値の指定 */
color: oklch(60% 0.15 200 / 0.8);

/* CSS変数と組み合わせ */
:root {
  --primary-hue: 220;
  --primary-lightness: 60%;
  --primary-chroma: 0.15;
}

.button {
  background: oklch(
    var(--primary-lightness)
    var(--primary-chroma)
    var(--primary-hue)
  );
}

カラーパレットの生成

OKLCH の利点を活かして、統一感のあるカラーパレットを作成できます。

:root {
  /* ベースカラー */
  --hue: 220;

  /* 明度を変えるだけで、統一感のある階調を作成 */
  --color-50: oklch(98% 0.05 var(--hue));
  --color-100: oklch(95% 0.08 var(--hue));
  --color-200: oklch(90% 0.10 var(--hue));
  --color-300: oklch(82% 0.12 var(--hue));
  --color-400: oklch(72% 0.14 var(--hue));
  --color-500: oklch(60% 0.15 var(--hue));
  --color-600: oklch(50% 0.14 var(--hue));
  --color-700: oklch(42% 0.12 var(--hue));
  --color-800: oklch(35% 0.10 var(--hue));
  --color-900: oklch(28% 0.08 var(--hue));
}

実践的なテクニック

1. ダイナミックなテーマカラー

:root {
  --theme-hue: 280;
  --theme-chroma: 0.15;
}

/* プライマリーカラー */
.primary {
  background: oklch(60% var(--theme-chroma) var(--theme-hue));
  color: oklch(98% 0.05 var(--theme-hue));
}

/* ホバー時 - 明度を下げるだけ */
.primary:hover {
  background: oklch(50% var(--theme-chroma) var(--theme-hue));
}

/* アクティブ時 - さらに明度を下げる */
.primary:active {
  background: oklch(40% var(--theme-chroma) var(--theme-hue));
}

2. 補色の生成

:root {
  --primary-hue: 200;
}

.primary {
  background: oklch(60% 0.15 var(--primary-hue));
}

/* 補色 = 色相を180度回転 */
.complementary {
  background: oklch(60% 0.15 calc(var(--primary-hue) + 180));
}

/* 三角補色 */
.triadic-1 {
  background: oklch(60% 0.15 calc(var(--primary-hue) + 120));
}

.triadic-2 {
  background: oklch(60% 0.15 calc(var(--primary-hue) + 240));
}

3. アクセシビリティを考慮したコントラスト

OKLCH の明度は人間の視覚に基づいているため、コントラスト比の計算が直感的です。

:root {
  --brand-hue: 220;
  --brand-chroma: 0.15;
}

/* 背景色 */
.card {
  background: oklch(95% 0.05 var(--brand-hue));
  /* テキスト色 - 十分なコントラスト */
  color: oklch(30% 0.08 var(--brand-hue));
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  .card {
    background: oklch(20% 0.05 var(--brand-hue));
    color: oklch(90% 0.08 var(--brand-hue));
  }
}

4. グラデーションの美しい表現

/* OKLCHを使った滑らかなグラデーション */
.gradient-oklch {
  background: linear-gradient(
    to right,
    oklch(70% 0.2 0),      /* 赤 */
    oklch(70% 0.2 60),     /* 黄 */
    oklch(70% 0.2 120),    /* 緑 */
    oklch(70% 0.2 180),    /* シアン */
    oklch(70% 0.2 240),    /* 青 */
    oklch(70% 0.2 300)     /* マゼンタ */
  );
}

/* HSLとの比較 */
.gradient-hsl {
  background: linear-gradient(
    to right,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%)
  );
  /* 明度のムラが目立つ */
}

色空間の補間

CSS Color Module Level 4 では、グラデーションやアニメーションの補間方法を指定できます。

/* OKLCH色空間で補間 */
.gradient {
  background: linear-gradient(
    in oklch,
    oklch(70% 0.2 0) 0%,
    oklch(70% 0.2 240) 100%
  );
}

/* 色相の補間方向を指定 */
.gradient-shorter {
  background: linear-gradient(
    in oklch shorter hue,
    oklch(70% 0.2 10) 0%,
    oklch(70% 0.2 350) 100%
  );
}

/* アニメーション */
@keyframes color-shift {
  from {
    background: oklch(60% 0.15 0);
  }
  to {
    background: oklch(60% 0.15 360);
  }
}

.animated {
  animation: color-shift 10s linear infinite;
  animation-composition: replace;
}

実用例: デザインシステム

:root {
  /* ブランドカラーの定義 */
  --brand-hue: 280;
  --neutral-hue: 240;

  /* ブランドカラーパレット */
  --brand-50: oklch(98% 0.02 var(--brand-hue));
  --brand-100: oklch(95% 0.04 var(--brand-hue));
  --brand-500: oklch(60% 0.15 var(--brand-hue));
  --brand-600: oklch(50% 0.14 var(--brand-hue));
  --brand-900: oklch(25% 0.08 var(--brand-hue));

  /* ニュートラルカラー */
  --neutral-50: oklch(98% 0.01 var(--neutral-hue));
  --neutral-100: oklch(95% 0.02 var(--neutral-hue));
  --neutral-500: oklch(60% 0.03 var(--neutral-hue));
  --neutral-900: oklch(25% 0.02 var(--neutral-hue));

  /* セマンティックカラー */
  --success: oklch(65% 0.15 145);
  --warning: oklch(75% 0.15 85);
  --error: oklch(60% 0.18 25);
  --info: oklch(65% 0.15 230);
}

/* コンポーネントへの適用 */
.button-primary {
  background: var(--brand-500);
  color: var(--brand-50);
  border: 1px solid var(--brand-600);
}

.button-primary:hover {
  background: var(--brand-600);
}

.button-primary:disabled {
  background: var(--neutral-100);
  color: var(--neutral-500);
  border-color: var(--neutral-100);
}

ツールとリソース

1. カラーピッカー

// OKLCHカラーピッカーのシンプルな実装
class OKLCHPicker {
  constructor(element) {
    this.element = element;
    this.l = 60;
    this.c = 0.15;
    this.h = 220;
    this.render();
  }

  updateColor(l, c, h) {
    this.l = l;
    this.c = c;
    this.h = h;
    this.render();
  }

  render() {
    const color = `oklch(${this.l}% ${this.c} ${this.h})`;
    this.element.style.backgroundColor = color;
    this.element.textContent = color;
  }

  toCSS() {
    return `oklch(${this.l}% ${this.c} ${this.h})`;
  }
}

2. カラー変換ユーティリティ

// HEXからOKLCHへの変換（culori などのライブラリを使用）
import { converter, formatCss } from 'culori';

const hexToOklch = converter('oklch');

const color = hexToOklch('#3b82f6');
console.log(formatCss(color));
// oklch(65.13% 0.198 254.62)

3. おすすめツール

  • OKLCH Color Picker: https://oklch.com/
  • Culori: JavaScript カラー変換ライブラリ
  • ColorAide: Python カラー操作ライブラリ

パフォーマンスの考慮

OKLCH は計算が複雑なため、大量の色変換を行う場合は注意が必要です。

/* ❌ 避けるべき: 毎フレーム計算 */
@keyframes bad-animation {
  from { background: oklch(60% 0.15 0); }
  to { background: oklch(60% 0.15 360); }
}

.element {
  animation: bad-animation 0.1s infinite;
}

/* ✅ 推奨: カスタムプロパティで事前計算 */
:root {
  --color-start: oklch(60% 0.15 0);
  --color-end: oklch(60% 0.15 360);
}

@keyframes good-animation {
  from { background: var(--color-start); }
  to { background: var(--color-end); }
}

トラブルシューティング

色域外の色

一部の OKLCH 値は、ディスプレイが表示できる色域外になることがあります。

/* 色域外になる可能性がある */
.out-of-gamut {
  background: oklch(80% 0.4 120);
  /* 彩度が高すぎる */
}

/* 安全な範囲 */
.safe-gamut {
  background: oklch(80% 0.2 120);
  /* C値を0.2以下に抑える */
}

ブラウザ互換性

// OKLCH サポートの検出
function supportsOKLCH() {
  const test = document.createElement('div');
  test.style.color = 'oklch(50% 0.1 180)';
  return test.style.color !== '';
}

if (!supportsOKLCH()) {
  // フォールバック処理
  document.documentElement.classList.add('no-oklch');
}
/* フォールバック */
.element {
  background: #3b82f6;
}

html:not(.no-oklch) .element {
  background: oklch(65% 0.2 254);
}

まとめ

OKLCH カラーモデルは、以下のような利点があります。

  1. 知覚的に均一: 同じ明度なら、色相が変わっても同じ明るさに見える
  2. 直感的な操作: 明度、彩度、色相を独立して制御できる
  3. 美しいグラデーション: 自然で滑らかな色の遷移
  4. アクセシビリティ: コントラスト比の計算が直感的

2025年現在、主要ブラウザでサポートされており、適切なフォールバックを提供すれば、実プロジェクトでも安心して使用できます。

次世代のカラーデザインに、OKLCH を取り入れてみてはいかがでしょうか。

参考リンク