このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
lab()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年5月.
* Some parts of this feature may have varying levels of support.
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([from<color>]?[<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
div { width: 50px; height: 50px; padding: 5px; margin: 5px; display: inline-block; border: 1px solid black;}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> <div data-color="red"></div> <div data-color="red-alpha"></div></div>CSS
div { width: 50px; height: 50px; padding: 5px; margin: 5px; display: inline-block; border: 1px solid black;}#background-div { background-color: lightblue; width: 150px; height: 40px;}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 |
ブラウザーの互換性
関連情報
<color>データ型: すべての色記法の一覧- LCH colors in CSS: what, why, and how?
- Safari Technology Preview 122 release notes:
lab()およびlch()色を含む