CSS lch() 関数

定義と使用法

CSSの lch() 関数が LCH（明度-色度-彩度）色空間で色を指定します。

例

定不同的 lch() 色：

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p3 {background-color:lch(90% 160 200);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}

#p9 {background-color:lch(90% 130 70);}

実際に試してみる

CSS 言語

絶対値の構文これは相対色が基づく元の色です。 0（または 0%）は黒色、100（または 100%）は白色を示します。 H / Alch(from

最小値は 0（または 0%）です。最大値は上限がありません（実際には 230 を超えません）。100% は 150 に等しいです。

相対値の構文 from これは相対色が基づく元の色です。 0（または 0%）は黒色、100（または 100%）は白色を示します。 H / Alch(from

技術的詳細

ブラウザのサポート

テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参照：CSS カラー

参照：CSS hsl() 関数

参照：CSS hwb() 関数

参照：CSS lab() 関数

参照：CSS oklab() 関数

参照：CSS oklch() 関数