lab()

Baseline 2023
Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

lab() 関数記法は、指定された色を CIE L*a*b* 色空間で表現する。 Lab は人間が見ることのできる色の範囲をすべて表します。

構文

css
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

  • 関数記法: lab(L a b[ / A])

  • L

    • : <number>0100 の範囲、 <percentage>0%100% の範囲、またはキーワード none であり、 CIE の明るさを指定します。ここで数値 00% (黒)に、数値 100100% (白)に対応します。
  • a

    • : <number>-125125 の範囲、 <percentage>-100%100% の範囲、またはキーワード none であり、 CIELAB 色空間における a 軸上の距離(緑と赤の色合い)を指定します。
  • b

    • : <number>-125125 の範囲、 <percentage>-100%100% の範囲、またはキーワード none であり、 CIELAB 色空間における b 軸上の距離(青と黄の色合い)を指定します。
  • A 省略可

    • : <alpha-value> またはキーワード none です。 1100% (完全に不透明)に対応します。

メモ: 通常、 CSS でパーセント値が数値と等価である場合、 100% が数値 1 と等しくなります。 この場合は特別で、 100%L 値では 100a 値と b 値では 125 となります。

メモ: none の効果については色成分の欠落を参照してください。

形式文法

<lab()> = 
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<alpha-value> =
<number> |
<percentage>

明るさと色の軸を lab() で調整

次の例は、 lab() 関数の明度、 a 軸、 b 軸の値を変化させたときの効果を示しています。

HTML

html
<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

<div data-color="blue"></div>
<div data-color="blue-light"></div>

CSS

css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-a"] {
  background-color: lab(100 110 125);
}

[data-color="green"] {
  background-color: lab(75% -120 125);
}
[data-color="green-b"] {
  background-color: lab(75% -120 10);
}

[data-color="blue"] {
  background-color: lab(0 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(70 -120 -120);
}

結果

透明度を lab() で調整

次の例は lab() 関数記法の A(アルファ)値を変化させたときの効果を示しています。 redred-alpha 要素は #background-div 要素に重なり、透明度の効果を示しています。 A0.4 の値を与えると、色は 40% の不透明度になります。

HTML

html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(100 125 125 / 0.4);
}

結果

仕様書

Specification
CSS Color Module Level 5
# relative-Lab
CSS Color Module Level 4
# lab-colors

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
lab() (Lab color model)
Mix <percentage> and <number> in parameters
Relative Lab colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報