lch()
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.
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( [ <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 |
ブラウザーの互換性
Loading…