OKLCHカラーとは何か

• OKLCH は 人間の視覚認知に合わせた最新のカラーモデル で、色同士の 明るさ・彩度・色相の変化が均一に感じられる特性 を持つ 知覚的に均等なカラーモデル
• 構造は Lightness（明るさ）、Chroma（彩度）、Hue（色相） で構成され、既存モデルに比べて 一貫したカラーパレットの構成 が可能
• 同じ明るさ・彩度を保ったまま Hueだけを変更 しても均一な色パレットを作れるため、UIデザインに有利
• sRGB/HSLと比べて 予測しやすい明暗変化と均一なグラデーション を提供するが、場合によっては意図しない色が生成されることもある
• Display-P3のような最新ディスプレイ ではより広い色表現が可能で、最新ブラウザでは CSS Color 4 としてサポートされ、sRGBフォールバック処理 も提供されているため、徐々にWeb標準として定着しつつある

---

OKLCHカラーモデルの紹介

• OKLCHは 知覚的均一性（perceptually uniform） を目的に開発された最新のカラーモデル
• このモデルは 人が実際に色を認識する方法 に近い形で動作するため、デジタルデザインやフロントエンド開発で 色の扱いがはるかに容易になる

カラーモデルの基本概念

• カラーモデル は色を数学的に定義し表現する システム
• 主に使われるモデルの例: RGB, HSL, LCH, OKLCH, LAB, XYZ
• それぞれのモデルは 色表現および操作のしやすさ を左右する

色の表記方法の例

• oklch(0.55 0.18 260)
• hsl(220 100% 50%)
• rgb(0, 128, 255)
• lch(60% 60 260)
• lab(50 -10 -50)
• color(xyz 0.18 0.19 0.6)
• #1E90FF

Gamut（色空間の範囲）

• Gamut はそのカラーモデルが表現できる 色全体の範囲 を意味する
• 代表的なgamut: sRGB（Webの標準）、Display-P3（最新デバイスで対応）
• 色空間は gamutの範囲 に加えて、white point、transfer function などさまざまな属性を持つ

OKLCHの構造

OKLCHとLCHはどちらも Lightness、Chroma、Hue という3つの値で構成される
OKLCHは OKLab 色空間を基盤としている

• Lightness（明度/明るさ） : 0〜1 または 0%〜100% で表現され、明るさの均一な変化 を保証する
• Chroma（彩度） : 色の強さで、HSLの Saturation（彩度） に似ている
• Hue（色相） : 0〜360度の角度で色を表す

OKLCHの利点と活用

• 一貫した明るさ

  • OKLCHでは 同じ明るさと彩度の値でhueだけを変えて 色を指定すると、すべての色が似た明るさに感じられる
  • 従来のsRGBやHSLでは、色によって明るさや彩度が一貫して見えないことがある
  • そのためOKLCHは 知覚的に均等なカラーパレット を作りやすい

• 予測しやすい色の明度ステップ

  • OKLCHで 明るさを変化させると、hue（色相）やchroma（彩度）を変えずに 多様な色の段階を作ることができる
  • HSLなどでは明るさが変わると色相がずれるドリフト現象が起こる
  • OKLCHでは明るさだけを調整しても一貫した色の明度ステップを作成できる

• グラデーション（Gradients）の扱い方

  • sRGBでは 赤・緑・青の値の間を補間 するため、中間地点が濁ったり明るさの変化が激しくなったりする
  • OKLCHは Lightness、Chroma、Hue軸に沿って補間 するため、より自然なグラデーションを実現できる
  • ただし Hue値が円環構造 のため、予期しない色の変化が生じることがある
  • これを防ぐには、OKLabで直線補間（interpolation）することでより予測しやすい結果を得られる

色空間のサポート

• sRGBでは最新ディスプレイが表現する広い色空間の一部をカバーできない
• OKLCHを使えば Display-P3など広い色域に対応する機器でより鮮やかな色表現が可能
• sRGBしか対応しない機器では できるだけ近い色にマッピング される

最大Chroma（彩度）値

• OKLCHでは実際のスクリーンが表現できる範囲外の色も数学的には指定できる
• たとえば oklch(0.7 0.4 40) のように大きすぎるchroma値は実際には表示できず、近い色にクリッピング される
• 最大chromaの概念 を理解し、色味、明るさ、選択する色空間（sRGB、Display-P3）に応じて適切な値を設定することが重要

ブラウザ対応とフォールバック

• OKLCHカラーは CSS Color Module Level 4 で導入され、最新ブラウザの大半でサポートされている
• 古いブラウザでは対応していない場合があるため、@supports CSSディレクティブでフォールバック値を設定できる

  @layer base {  
    :root {  
      /* sRGB hex */  
      --color-gray-100: #fcfcfc;  
      --color-gray-200: #fafafa;  
      --color-gray-300: #f4f4f4;  
  
      @supports (color: oklch(0 0 0)) {  
        /* OKLCH */  
        --color-gray-100: oklch(0.991 0 0);  
        --color-gray-200: oklch(0.982 0 0);  
        --color-gray-300: oklch(0.955 0 0);  
      }  
    }  
  }  
  

• 対応ブラウザではOKLCH、非対応ブラウザではsRGB（hex）の色が適用される

oklch.fyiツール

• oklch.fyi はOKLCHカラーパレット生成、CSS変数変換など OKLCH関連機能 を提供するWebツール
• デザインシステムやテーマ開発などでOKLCHカラーの活用を容易にしてくれる