【CSS】カラー系の関数 hsl(), hwb(),lab(),lch()

どうも、くまだです。

CSSのColor系関数、hsl(), hwb(),lab(),lch()について。

カラーの指定の種類

CSSでカラーの指定の仕方がさまざまあります。よく使われるのは以下のような指定だと思います。

Hexは0~9からA~Fまでの値（16進数）で指定する方法、RGBはRed、Green、Blueの値を0~255までの数値（もしくは%）で指定する方法です。

これらの他に、以下の方法でも指定できます。

HSL()は以下のように指定します。

色相(Hue)、彩度(Saturation)、輝度(Lightness)の成分で色指定します。

<div class="box">
   <p>あああああ</p>
</div>

.box {
    padding: 20px;

    /* h:色相の角度, s:彩度 % , l: 輝度 %*/

    background-color:hsl(9, 79%, 79%)
}

background-color:hsl(色相, 彩度, 輝度)という記述です。

HWB()は以下のように指定します。

色相(Hue)、白さ(Whiteness)、黒さ(Blackness)の成分で色指定します。

.box {
    padding: 20px;

    /* h:色相の角度, w: 白の割合 % , b: 黒の割合 % */
    background-color: hwb(9 79% 79%);

}

background-color:hwb(色相白さ黒さ)という記述です。

hwb()は、「, (カンマ)」区切りで指定できないので、半角スペースで指定します。

Lab()は以下のように指定します。

CIE 明度(CIE Lightness)、a(緑から赤への軸)、b(青から黄色への軸)の成分で色指定します。

.box {
    padding: 20px;

    /* l: 黒を0%、白を100%とする明度 %, a: 赤から緑の軸, b: 青から黄色の軸 */
    background-color: lab(9% 79 79);

}

background-color:lab(明度赤から緑の軸青から黄色の軸)という記述です。

こちらも「, (カンマ)」区切りで指定できないので、半角スペースで指定します。

人間の視覚に近い色の調整ができるので、異なる環境でも色の見え方が安定します。

Lch()は以下のように指定します。

CIE 明度(CIE Lightness)、彩度(Chroma)、色相(Hue)の成分で色指定します。

.box {
    padding: 20px;

    /* l:明度 %, c: 彩度, h: 色相の角度 */
    background-color: lch(9% 79 79);
}

background-color:lch(明度彩度色相)という記述です。

こちらも「, (カンマ)」区切りで指定できないので、半角スペースで指定します。

それぞれの使い分け方としては、

ここまで読んでくださりありがとうございました。