Widely available 安全に使用可能。広色域が必要なデザインや知覚的に均一なカラーパレットの生成に最適。sRGB のフォールバックを推奨。

Lab and LCH color functions

lab() 関数記法は、指定された色を CIE L*a*b* 色空間で表現します。

Lab は、色の明度、赤/緑軸の値、青/黄軸の値、およびオプションのアルファ透過値を指定することで、人間が認識できる全色域を表します。

カラー色空間

対応ブラウザ

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

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

lch() 関数記法は、指定された色を明度、彩度、色相で表す LCH color spaceで表現します。これは CIELab 色空間の color_value/lab と同じ L 軸を使用しますが、極座標系の C （彩度）と H （色相）を使用します。
111
111
113
15
111
15
lch.mixed type parameters

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

基本構文

CSS 
/* Lab: lab(luminance a-axis b-axis / opacity) */
.lab-color {
  color: lab(60 -30 50);
}

/* LCH: lch(luminance chroma hue / opacity) */
.lch-color {
  color: lch(60 50 270);
}

/* With opacity */
.lch-alpha {
  color: lch(60 50 270 / 0.8);
}

ライブデモ

Lab col-

Lab and LCH color functions Lab col- demo.

プレビュー全画面表示

LCH col-

Lab and LCH color functions LCH col- demo.

プレビュー全画面表示

saturationske-l (LCH)

Lab and LCH color functions saturationske-l (LCH) demo.

プレビュー全画面表示

実務での使いどころ

  • 知覚的に均一なパレット

    LCH の明度を固定して色相を変えるだけで、視覚的に同じ明るさのカラーパレットを生成できる。

  • 広色域ディスプレイの活用

    P3 対応ディスプレイでより鮮やかな色を表示し、デザインの表現力を高める。

注意点

  • sRGB の色域外の色はモニターによって表示が異なる。非広色域ディスプレイではクランプ（色域圧縮）される。
  • 既存の sRGB カラーをフォールバックとして併記すること。

フォールバック戦略

CSS 
/* sRGB フォールバック */
.element {
  color: #4a7c59;
  color: lch(50 40 140);
}

アクセシビリティ

  • 広色域の鮮やかな色は一部のユーザーにとって刺激が強い場合がある。コントラスト比は sRGB 換算で確認すること。

参考リンク