OKLab and OKLCH
HSL は人間の視覚と合わないため、同じ lightness 値でも色によって明るさが異なって見える。OKLCH は知覚的均一性を持ち、L（明度）・C（彩度）・H（色相）を変えても視覚的に一貫したカラーパレットを生成できる。
概要
HSL は人間の視覚と合わないため、同じ lightness 値でも色によって明るさが異なって見える。OKLCH は知覚的均一性を持ち、L（明度）・C（彩度）・H（色相）を変えても視覚的に一貫したカラーパレットを生成できる。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 15.4+
Firefox 113+
モバイル
Chrome Android 111+
Safari iOS 15.4+
Firefox Android 113+
基本構文
CSS
/* OKLCH: oklch(明度 彩度 色相 / 透明度) */
: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(明度 a軸 b軸) */
.oklab-example {
background: oklab(0.7 -0.1 0.1);
}
/* 知覚的に均一なカラースケール */
.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));
}実務での使いどころ
-
デザインシステムのカラーパレット
明度を段階的に変えるだけで、視覚的に均一なステップのカラースケールを生成できる。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 のコントラスト比チェックツールで検証すること。
- 色相だけで情報を区別しないこと。形状やラベルなど色以外の手がかりも併用する。