lch()
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.
lch() 関数記法は、指定された色を LCH 色空間で表現するものです。これは lab() と同じ L 軸を持っていますが、極座標系の C （彩度）と H （色相）を使用します。
構文
css
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);
値
-
関数記法:
lch(L C H [/ A]) -
L- :
<number>で0～100の範囲、<percentage>で0%～100%の範囲、またはキーワードnoneであり、 CIE の明るさを指定します。ここで数値0は0%（黒）に、数値100は100%（白）に対応します。
- :
-
C- :
<number>、<percentage>、またはキーワード値noneであり、ここで0%は0に、100%は数値150に対応します。これは彩度の指標です（おおよそ「色の量」を表します）。その有効な最小値は0で、最大値は理論的には無制限です（しかし実際には230を超えることはありません）。
- :
-
H -
A省略可- :
<alpha-value>またはキーワードnoneです。1は100%（完全に不透明）に対応します。
- :
メモ:
通常、 CSS でパーセント値が数値と等価である場合、 100% が数値 1 と等しくなります。
この場合は特別で、 100% は L 値では 100、 C 値では 150 となります。
メモ:
none の効果については色成分の欠落を参照してください。
形式文法
<lch()> =
lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<hue> =
<number> |
<angle>
<alpha-value> =
<number> |
<percentage>
例
明度、彩度、色相を lch() で調整
次の例は、関数記法 lch() の L（明度）、C（彩度）、H（色相）の値を変化させたときの効果を示しています。
HTML
html
<div data-color="blue"></div>
<div data-color="blue-light"></div>
<div data-color="red"></div>
<div data-color="red-chroma"></div>
<div data-color="green"></div>
<div data-color="green-hue"></div>
CSS
css
[data-color="blue"] {
background-color: lch(0% 100 240);
}
[data-color="blue-light"] {
background-color: lch(100% 100 240);
}
[data-color="red"] {
background-color: lch(50% 130 20);
}
[data-color="red-chroma"] {
background-color: lch(100% 30 20);
}
[data-color="green"] {
background-color: lch(50% 132 130);
}
[data-color="green-hue"] {
background-color: lch(50% 132 180);
}
結果
透明度を lch() で調整
次の例は 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: lch(50% 130 20);
}
[data-color="red-alpha"] {
background-color: lch(50% 130 20 / 0.4);
}
結果
仕様書
| Specification |
|---|
| CSS Color Module Level 5 # relative-LCH |
| CSS Color Module Level 4 # lab-colors |