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>
で0
~100
の範囲、<percentage>
で0%
~100%
の範囲、またはキーワードnone
であり、 CIE の明るさを指定します。ここで数値0
は0%
(黒)に、数値100
は100%
(白)に対応します。
- :
-
a
- :
<number>
で-125
~125
の範囲、<percentage>
で-100%
~100%
の範囲、またはキーワードnone
であり、 CIELAB 色空間におけるa
軸上の距離(緑と赤の色合い)を指定します。
- :
-
b
- :
<number>
で-125
~125
の範囲、<percentage>
で-100%
~100%
の範囲、またはキーワードnone
であり、 CIELAB 色空間におけるb
軸上の距離(青と黄の色合い)を指定します。
- :
-
A
省略可- :
<alpha-value>
またはキーワードnone
です。1
は100%
(完全に不透明)に対応します。
- :
メモ: 通常、 CSS でパーセント値が数値と等価である場合、 100%
が数値 1
と等しくなります。
この場合は特別で、 100%
は L
値では 100
、 a
値と b
値では 125
となります。
メモ: none
の効果については色成分の欠落を参照してください。
形式文法
例
明るさと色の軸を 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
(アルファ)値を変化させたときの効果を示しています。
red
と red-alpha
要素は #background-div
要素に重なり、透明度の効果を示しています。
A
に 0.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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<color>
データ型: すべての色記法の一覧- LCH colors in CSS: what, why, and how?
- Safari Technology Preview 122 release notes:
lab()
およびlch()
色を含む