OKLCH - より良いウェブデザインのための新しい選択肢

profile image

OKLCHとは何か、従来のRGBやHSLの限界をどのように克服するか、そしてウェブデザインでどのように活用できるかを学びましょう。

CSS

この記事は DeepL によって翻訳されました。誤訳があれば教えてください！

OKLCHという新しい色空間が登場しました。Tailwind CSSなどの主要フレームワークがすでに採用を始め、最新のブラウザもサポートしています。この記事では、OKLCHとは何か、既存の色空間方式とどのような違いがあるのか、そしてなぜ開発されたのかを探ります。

色モデルの進化

RGB色モデルの限界

RGB色モデルはコンピュータディスプレイの動作方法に合わせて設計され、コンピュータグラフィックスとウェブで最も広く使用されている方式です。赤、緑、青の3つのチャンネルの値（0-255）を組み合わせて色を表現しますが、以下のような限界があります。

  1. 直感的でない色の操作: RGB値を見て、どのような色になるか予測するのは難しいです。例えば、rgb(128, 57, 198)がどのような色か当ててみてください！
  2. 非線形的な明るさ: RGBでは、明るさは3つのチャンネルの平均または加重平均として計算されますが、これは人間の視覚的認識と一致しません。例えば、純粋な青色（rgb(0, 0, 255)）と純粋な緑色（rgb(0, 255, 0)）はRGB値の合計は同じですが、人間が感じる明るさは緑色の方がはるかに明るいです。

  3. グラデーションの問題: RGB色間のグラデーションでは、中間に望ましくない灰色や鈍い色が現れることがよくあります。特に補色間のグラデーション（例：赤→青）でこの問題が顕著です。
    css
    background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%);
  4. 限られた色域: sRGB色域に限定されており、最新のディスプレイが表現できるより広い色域（P3など）を活用できません。

HSL色モデルの限界

HSL（色相、彩度、明度）はRGBよりも直感的な色モデルですが、依然としていくつかの限界があります：

  1. 知覚的均一性の欠如: HSLの明度（L）はRGBと同様に人間の視覚的認識と一致しません。例えば、異なる色相（H）で同じ明度（L）値を使用しても、目に見える明るさは異なる場合があります。
  2. 彩度の不均衡: 明度（L）によって彩度（S）の効果が変わります。非常に暗いまたは非常に明るい色では、彩度の変化がほとんど目立ちません。
    HSL - Blue (Hue: 240°)

    Lightness: 10%

    S=0%
    S=50%
    S=100%

    Lightness: 50%

    S=0%
    S=50%
    S=100%

    Lightness: 90%

    S=0%
    S=50%
    S=100%
  3. グラデーション問題の継続: HSLもRGBと同様に、グラデーションで中間色が鈍く表示される問題があります。
  4. 限られた色域: HSLもsRGB色域内で動作するため、より広い色域の色を表現できません。

色空間の進化：LAB、LCH、Oklab

これらの限界を克服するために、新しい色空間モデルが継続的に開発されてきました。詳細な違いを説明するには数学的な話が必要ですが、ここではそれを省略します。

LAB

CIE LAB（またはCIELAB）は1976年に国際照明委員会（CIE）によって開発された色空間です。LABは人間の視覚認識に合わせて設計されており、3つの軸で構成されています：

  • L: 明度、0（黒）～100（白）
  • a: 緑-赤軸、負の値は緑、正の値は赤
  • b: 青-黄軸、負の値は青、正の値は黄

LCH（CIELCh）

LCHはLAB色空間を極座標に変換したものです。ここで「L」はLABと同じ明度値、「C」は彩度（aとb軸の距離）、「H」は色相（aとb軸の角度）を表します。LCHはLABの知覚的均一性を維持しながら、色相と彩度を直感的に操作できるようにします。

しかし、CIE LABとLCHにも限界があります。青色領域で歪みが発生する現象があります。

Oklab色空間

OklabはBjörn Ottossonが2020年に開発した新しい色空間で、CIE LABの限界を克服するために設計されました。OklabはLABと同じ構造（L、a、b）を持っていますが、色変換方法が異なります。

開発者によると、「Ok」という接頭辞がついているのは、この色モデルがOKな仕事をするからだそうです...

OKLCHとは？

OKLCHは人間の視覚的認識により近く色を表現できるように設計された色空間です。Oklabを極座標に変換したもので、Oklabのすべての利点を維持しながら色相（H）と彩度（C）を直感的に操作できるようにします。これはCIELChとOklabの利点を組み合わせた形と見なすことができます。

OKLCHの構成要素

  1. L（明度）

    • 色の明るさを表し、0（黒）～1（白）または0%～100%
    • 人間の視覚認識に合わせているため、値の変化が実際に私たちの目に同じレベルの明るさの変化として感じられます

  2. C（彩度/色の強度）

    • 色の鮮やかさまたは強度を表します
    • 0は完全な灰色（無彩色）、値が大きくなるほどより鮮やかな色になります
    • ディスプレイの色域（sRGB、P3など）によって最大値が異なり、一般的に0.37以下です

  3. H（色相）

    • 色の種類を表し、0～360度の角度で表現されます
    • 赤（0/360）、黄（90）、緑（140）、青（220）、紫（320）などが角度で一周表現されます

  4. A（透明度）

    • オプションで、「/」の後に0～1または0%～100%で透明度を指定できます

これらの構成要素は互いに独立して機能します。一つの値を変更しても他の値に影響を与えません。これはRGBやHSLなどの既存の色モデルの主な欠点を解決した特性の一つです。

CSSでのOKLCHの使用法

css
/* 基本構文 */
color: oklch(L C H);
color: oklch(L C H / A);

/* 明るい青 */
color: oklch(0.7 0.2 240);

/* 透明な黄色 */
color: oklch(60% 0.25 90 / 80%);

/* 非常に鮮やかな赤（P3色域） */
color: oklch(0.6 0.34 30);

/* グレースケール（彩度0） */
color: oklch(0.5 0 0);  /* 中間グレー */
color: oklch(0.8 0 0);  /* 明るいグレー */
color: oklch(0.2 0 0);  /* 暗いグレー */
  • L値は小数（0～1）またはパーセンテージ（0%～100%）で表現できます
  • C値は一般的に小数で表現され、0.37以下の値がほとんどのディスプレイで安全に表現されます
  • H値は0～360の角度で表現され、単位（deg）は省略可能です

OKLCHの利点

  1. 知覚的均一性： OKLCHは値の変化が視覚的にも均一に感じられるように設計されています。例えば、明度値を10%変化させると、すべての色で同様のレベルの明るさが感じられます。

    RGB
    OKLCH

  2. 直感的な色の操作： OKLCHでは明度、彩度、色相をそれぞれ独立して調整できます。これにより、カラーパレットの作成やアクセシビリティの高いデザイン作業がはるかに簡単で予測可能になります。

    HSL
    0%
    20%
    40%
    60%
    80%
    100%
    OKLCH
    0
    0.05
    0.1
    0.15
    0.2
    0.25

  3. 広い色域のサポート： OKLCHはsRGBだけでなく、P3のような最新ディスプレイの広い色域もサポートしています。最新のモバイル機器や高級ディスプレイでその違いを確実に感じることができます。

  4. 一貫したグラデーション： OKLCHを使用すると、色間のグラデーションが滑らかで自然に表現されます。既存のRGBやHSLでよく発生する中間色の鈍さや色バンディングの問題を大幅に減らすことができます。

    RGB
    OKLCH

  5. アクセシビリティの向上： 明度（L）値を一定に保ちながら色を調整できるため、輝度対比が重要なアクセシビリティデザインに有利です。これにより、WCAGアクセシビリティ基準を満たす色の組み合わせをより簡単に作成できます。

活用事例

カラーパレットの生成

OKLCHのL、C、H値を一定間隔で調整することで、直感的で一貫したカラーパレットを自動的に生成できます。

css
/* 同じ明度と彩度を維持しながら色相のみを変更 */
--primary: oklch(65% 0.2 240);  /* 青 */
--accent1: oklch(65% 0.2 30);   /* 赤 */
--accent2: oklch(65% 0.2 120);  /* 緑 */

/* 同じ色相と彩度を維持しながら明度段階を作成 */
--primary-100: oklch(90% 0.2 240);  /* 非常に明るい青 */
--primary-500: oklch(65% 0.2 240);  /* 中間の青 */
--primary-900: oklch(30% 0.2 240);  /* 暗い青 */

Tailwind CSS v4

Tailwind CSSはv4バージョンで基本カラーパレット全体をRGBからOKLCHにアップグレードしました。特にP3色域をサポートするディスプレイでより鮮やかで豊かな色を提供するためだと言われています。

結論

OKLCHは人間の視覚に合わせた色空間で、既存の色モデルの限界を克服し、より直感的で予測可能な色の作業を可能にします。広い色域のサポート、滑らかなグラデーション、アクセシビリティの向上など様々な利点により、最新のウェブデザインやUI/UX分野で採用すべき新しい色空間です。

❤️ 0
🔥 0
😎 0
⭐️ 0
🆒 0