【CSS Modules】hsl()関数の使い方

hsl()関数は、HSL (Hue, Saturation, Lightness) モデルに基づいて色を定義し、生成する関数です。この関数は、色相 (Hue)、彩度 (Saturation)、明度 (Lightness) の3つの主要な要素を指定することで、人間が直感的に理解しやすい形で色を表現します。

最初の引数である色相 (Hue) は、色の種類を決定します。これは通常、0から360までの角度で指定され、色相環上の位置を表します。0度または360度は赤色に相当し、120度は緑色、240度は青色を表します。この値を調整することで、赤から黄、緑、シアン、青、マゼンタへと色が段階的に変化します。

次に、彩度 (Saturation) は色の鮮やかさを指定します。これは0%から100%までのパーセンテージで表され、0%は完全に灰色がかった色となり、100%は最も鮮やかで純粋な色を示します。彩度を下げるほど、色がくすんで見えたり、モノクロに近づいたりします。

最後の引数である明度 (Lightness) は、色の明るさを調整します。これも0%から100%までのパーセンテージで指定され、0%は純粋な黒色、100%は純粋な白色を表します。50%が標準的な明るさとなり、それより低い値は色が暗くなり、高い値は色が明るくなります。

hsl()関数を使用することで、例えばベースカラーの色相を固定しつつ、彩度や明度だけを変更して色のバリエーションを簡単に作成するといった、柔軟な色の管理が可能になります。これにより、WebサイトやアプリケーションのUIデザインにおいて、統一感のあるカラーパレットを効率的に構築することができます。

Copy
1property: hsl( <hue>, <saturation>, <lightness> );

<hue> <percentage> <percentage> [ / <alpha-value> ]?

• <hue>: 色相 (0 から 360 までの数値)
• <percentage>: 彩度 (0% から 100% までのパーセンテージ)
• <percentage>: 明度 (0% から 100% までのパーセンテージ)
• [ / <alpha-value> ]?: アルファ値 (0 から 1 までの数値、または 0% から 100% までのパーセンテージ、省略可能)

hsl()関数は、色相 (Hue)、彩度 (Saturation)、明度 (Lightness) の3つの値から色を表現するカラーモデルであるHSLカラーモデルに対応した色を返します。