Widely available 条件付きOK。主要ブラウザで対応済み。フォールバックカラーを定義すること。

OKLab and OKLCH

oklab() 関数記法は、指定された色を、人間の目による色の知覚方法を模倣しようとする Oklab 色空間で表現します。

Oklab は知覚的色空間で、次のような場合に使用されます。

画像の明度を変えずに、グレースケールに変換する。

ユーザーが感じる色相や明度を維持したまま、色の彩度を変更する。

色の滑らかで均一なグラデーションを作成する（例えば、<canvas> 要素で手動で補間する場合）。

この oklab() は Oklab 色空間上の同次座標系、 a 軸と b 軸で動作します。これは、RGB よりも広い範囲の、広色域や P3 色を含む任意の色を表現することができます。極座標系、彩度、色相が必要な場合は、 oklch() を使用してください。

カラーデザインシステム

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.oklab
111
111
113
15.4
111
15.4
CSS タイプ
oklab.mixed type parameters

パラメータに `<percentage>` と `<number>` を混在させます
116
116
113
16.2
116
16.2
oklch

oklch() 関数記法は、指定された色を Oklch color spaceで表現します。oklch() は color_value/oklab の円筒形式であり、同じ L 軸を使用しますが、極座標系の C （彩度）と H （色相）を使用します。
111
111
113
15.4
111
15.4
oklch.mixed type parameters

パラメータに `<percentage>` と `<number>` を混在させます
116
116
113
16.2
116
16.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* OKLCH: oklch(luminance, saturation, hue / opacity) */
:root {
  --brand: oklch(0.6 0.15 250);
  --brand-light: oklch(0.8 0.1 250);
  --brand-dark: oklch(0.4 0.15 250);
}

/* OKLab: oklab(luminance a-axis b-axis) */
.oklab-example {
  background: oklab(0.7 -0.1 0.1);
}

/* Perceptually uniform color scale */
.palette {
  --hue: 250;
  --step-1: oklch(0.95 0.03 var(--hue));
  --step-5: oklch(0.70 0.12 var(--hue));
  --step-9: oklch(0.30 0.12 var(--hue));
}

ライブデモ

OKLCH lightnessske-l

OKLab and OKLCH OKLCH lightnessske-l demo.

プレビュー全画面表示

Oklab col-

OKLab and OKLCH OKLab col- demo.

プレビュー全画面表示

OKLCH Colorphase

OKLab and OKLCH OKLCH colorphase demo.

プレビュー全画面表示

実務での使いどころ

  • デザインシステムのカラーパレット

    明度を段階的に変えるだけで、視覚的に均一なステップのカラースケールを生成できる。HSL では青と黄で明るさが大きく異なる問題を解決する。

  • ダークモードの色変換

    OKLCH の明度のみを反転させることで、色相と彩度を保ったまま自然なダークモードカラーを生成できる。

注意点

  • sRGB 色域外の色は、非対応モニターで自動的にクランプされる。意図した色と異なる場合がある。
  • CSS カスタムプロパティと oklch() の組み合わせは、calc() 内で色相を動的に計算する際に注意が必要。

フォールバック戦略

CSS 
/* sRGB フォールバック付き */
.element {
  background-color: #4466cc;
  background-color: oklch(0.55 0.15 260);
}

/* @supports での分岐 */
@supports (color: oklch(0 0 0)) {
  :root {
    --brand: oklch(0.6 0.15 250);
  }
}

アクセシビリティ

  • OKLCH の均一な明度はコントラスト比の予測を容易にするが、最終的には WCAG のコントラスト比チェックツールで検証すること。
  • 色相だけで情報を区別しないこと。形状やラベルなど色以外の手がかりも併用する。

参考リンク