お問い合わせ

CSSで色を扱うならHSLAで決まり（数字からの色選び）

UI開発者 佐竹

統一感のある色を用意したい時、色理論に精通していなければRGBで色を選択するのは一苦労かもしれません。
そんな時に使用したいのがHSLAです。

HSLAとは

HSLAはsRGB色空間内の色を色相（H）、彩度（S）、輝度（L）の各成分によって定義します。
アルファ成分（A）は任意で色の透明度を表します。

HSLA関数の表記

HSLA関数の表記は以下のようになります。

hsla(色相（H）, 彩度（S）, 輝度（L）[, 透明度（A）]);

hsla(色相（H） 彩度（S） 輝度（L）[/ 透明度（A）]);

色相（Hue）

色相（H）は色のベースとなる色合いで、色相環の角度で表されます。
単位はdeg（度）、rad（ラジアン）、grad（グラジアン）、turn（回転）表記です。単位のない数値の場合は、deg (度) として扱われます。

彩度（Saturation）

彩度（S）は色の鮮やかさです。
単位は%（パーセント）表記です。
0%が灰色の無彩色、100%が純色です。

輝度（Lightness）

輝度（L）は色の明るさです。
単位は%（パーセント）表記です。
0%が黒、100%が白、50%が純色です。

数字からの色選び

数字から色を選ぶにも基準が欲しいので、色理論を参考にしたいと思います。
色理論に沿った組み合わせの色をそれぞれHSLで表記し、そのHSLの数字からパターンを割り出していきます。
色理論から色の組み合わせを提案してくれるツールとして、CanvaのColor wheelを使用します。

  1. まずベースカラーを1つ決めて「1. Pick a color」に設定します。
    例では「#1FE0DF」を設定しました。

  2. 「2. Choose a color combination」を選択します。
    例では「Analogous（近似値）」を設定しました。

    16進数の値でベースカラー「#1FE0DF」とベースカラーに合う2色として「#1F80E0」「#1FE07F」が取得できます。
    しかし今回はHSLを使用したいのでPower ToysのColor Pickerで、16進数の値に対するHSL表記を確認します。

  3. Power Toysの設定からColor Pickerを開き、エディターの色形式で「HSL」「HEX」を有効にします。

    詳しいPower ToysのColor Pickerの設定についてはMicrosoftのColor Picker ユーティリティのページをご確認ください。

  4. Power ToysのColor Pickerを使用して、2.で出力されたカラーを選択してHSL表記を確認します。

    16進数の値「#1FE0DF」「#1F80E0」「#1FE07F」はそれぞれHSL表記で「hsl(180, 76%, 50%)」「hsl(210, 76%, 50%)」「hsl(150, 76%, 50%)」となります。

    16進数（HEX） HSL
    #1FE0DF hsl(180, 76%, 50%)
    #1F80E0 hsl(210, 76%, 50%)
    #1FE07F hsl(150, 76%, 50%)

    このHSL表記の色相（H）に当たる数字を見てください。

    「Analogous（近似値）」を設定した場合、色相（H）がベースカラーの「180deg」を基準に、プラスマイナス「30deg」となる「210deg」と「150deg」色が提案されていることがわかります。

使用できる色が3色では少ないので、色を増やします。

  1. CanvaのColor wheel「2. Choose a color combination」で「Monochromatic（単色）」を選択します。

    ベースカラーより控えめな色の組み合わせとして、16進数の値で「#4BD5E7」が取得できます。

  2. Power ToysのColor Pickerを使用して、1.で出力されたカラーを選択してHSL表記を確認します。

    16進数の値「#4BD5E7」はPower ToysのColor Pickerで確認するとHSL表記で「hsl(180, 76%, 60%)」となります。

    16進数（HEX） HSL
    #1FE0DF hsl(180, 76%, 50%)
    #4BD5E7 hsl(180, 76%, 60%)

    ベースカラーの「hsl(180, 76%, 50%)」と「hsl(180, 76%, 60%)」を見比べます。

    「Monochromatic（単色）」を設定した場合、輝度（L）がベースカラーを基準に、「10%」高いことがわかります。

    ベースカラーの輝度（L）50%は純色になります。
    コントラスト比を考慮した色選びに幅をもたせるために、提案された色とは逆に輝度（L）がベースカラーの輝度（L）より「10%」低い色も用意します。

  3. 同様に「Analogous（近似値）」で提案された2色でも、輝度（L）が「10%」高い色と「10%」低い色を用意します。

最後に用意した色をCSS内でブレることなく汎用的に扱うためにCSSカスタムプロパティとして設定します。

:root {
    --color-cyan-60: hsl(180, 76%, 60%);
    --color-cyan-50: hsl(180, 76%, 50%); /* ベースカラー */
    --color-cyan-40: hsl(180, 76%, 40%);
    --color-green-60: hsl(210, 76%, 60%);
    --color-green-50: hsl(210, 76%, 50%);
    --color-green-40: hsl(210, 76%, 40%);
    --color-green-cyan-60: hsl(150, 76%, 60%);
    --color-green-cyan-50: hsl(150, 76%, 50%);
    --color-green-cyan-40: hsl(150, 76%, 40%);
}

まとめ

HSLA表記だと数字からパターンが可視化されるので色理論に添った色選びがしやすく、CSSで扱いやすい印象を受けました。

2022年の記事一覧に戻る