【CSS Modules】lch()関数の使い方
lch()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
lch()関数は、CSSにおいて、色をLCH色空間で指定するために使用される関数です。
LCHは「Lightness（明度）」「Chroma（彩度）」「Hue（色相）」の頭文字を取っており、人間の目の知覚に近い形で色を表現できることが大きな特徴です。従来のRGBやHEXといった色指定方法では、色相や彩度を直感的に調整することが難しい場合がありましたが、LCH色空間を用いることで、これらの要素を独立して制御しやすくなります。これにより、特に、ある色の明度だけを変えたり、彩度だけを調整したりする際に、より自然で一貫性のある色のバリエーションを作り出すことが可能です。
この関数は、lch(L C H [/ alpha]) の形式で値を指定します。Lは色の明るさを表す明度で、0%から100%までの数値で指定します。Cは色の鮮やかさを表す彩度で、0から比較的大きな数値（例えば150など、色相によって最大値は異なります）で指定し、値が大きいほど鮮やかになります。Hは色の種類を表す色相で、0度から360度までの角度で指定し、赤、黄、緑、青といった色のサイクルを示します。オプションのalphaは透明度を表し、0（完全な透明）から1（完全な不透明）の範囲、またはパーセンテージで指定できます。
lch()関数を使用することで、デザイナーや開発者は、より広範囲な色表現と、ディスプレイの種類に依存しない安定した色再現性を実現しやすくなります。特に広色域ディスプレイが普及する中で、より豊かな色を表現するための強力なツールとして活用されており、CSSの背景色や文字色など、様々なプロパティ値として利用できます。
構文(syntax)
1div { 2 color: lch(50% 100 240); 3}
引数(parameters)
L: <percentage> | <number>, C: <number>, H: <angle> | <number>, A: <alpha-value> = 1
- L: <percentage> | <number>: 色の明度を表す値。パーセンテージ（0%〜100%）または数値（0〜1）で指定します。
- C: <number>: 色の彩度を表す値。数値で指定します。
- H: <angle> | <number>: 色相を表す値。角度（0deg〜360deg）または数値（0〜360）で指定します。
- A: <alpha-value> = 1: 色の透明度を表す値。0（完全に透明）から1（完全に不透明）までの数値で指定します。省略時は1（不透明）になります。
戻り値(return)
lch()関数は、CIELAB色空間における色を定義する際に使用され、計算された色を表す<color>値を返します。