Lab and LCH color functions
lab() と lch() は CIE 色空間に基づき、人間の知覚に近い色指定ができる。Lab は明度(L)・緑赤軸(a)・青黄軸(b)、LCH は明度(L)・彩度(C)・色相(H) で指定する。sRGB より広い色域（P3 ディスプレイなど）をカバーし、色の補間も知覚的に均一に行われる。
概要
lab() と lch() は CIE 色空間に基づき、人間の知覚に近い色指定ができる。Lab は明度(L)・緑赤軸(a)・青黄軸(b)、LCH は明度(L)・彩度(C)・色相(H) で指定する。sRGB より広い色域（P3 ディスプレイなど）をカバーし、色の補間も知覚的に均一に行われる。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 15+
Firefox 113+
モバイル
Chrome Android 111+
Safari iOS 15+
Firefox Android 113+
基本構文
CSS
/* Lab: lab(明度 a軸 b軸 / 透明度) */
.lab-color {
color: lab(60 -30 50);
}
/* LCH: lch(明度 彩度 色相 / 透明度) */
.lch-color {
color: lch(60 50 270);
}
/* 透明度付き */
.lch-alpha {
color: lch(60 50 270 / 0.8);
}実務での使いどころ
-
知覚的に均一なパレット
LCH の明度を固定して色相を変えるだけで、視覚的に同じ明るさのカラーパレットを生成できる。
-
広色域ディスプレイの活用
P3 対応ディスプレイでより鮮やかな色を表示し、デザインの表現力を高める。
注意点
- sRGB の色域外の色はモニターによって表示が異なる。非広色域ディスプレイではクランプ（色域圧縮）される。
- 既存の sRGB カラーをフォールバックとして併記すること。
フォールバック戦略
CSS
/* sRGB フォールバック */
.element {
color: #4a7c59;
color: lch(50 40 140);
}アクセシビリティ
- 広色域の鮮やかな色は一部のユーザーにとって刺激が強い場合がある。コントラスト比は sRGB 換算で確認すること。