CSSやSassで色管理をもっと簡単に

Webなどで色を指定する場合、#000000のような16進数やRGBでの指定が多かったと思います。
ですがどちらも調整したい時に直感的に変更できません。

CSSでの記述をHSLにするとすると、色の微調整が直感的に行うことができます。

HSLとは

HSLはHue(色相)、Saturation(彩度)、Lightness(輝度)という意味です。
この3つの要素をコントロールして色を作るイメージです。

Hue(色相)

色相はざっくり言うと何色かということです。
0度から360度の角度で表します。0度が赤で、180度はその補色となる青緑です。
色の概念が分かっていれば数値だけで何色系にしようかすぐに試せます。

Saturation(彩度)

彩度は色の鮮やかさのことです。
0%から100%の数値で設定します。パーセンテージが上がるほど鮮やかになります。

Lightness(輝度)

輝度は明るいか暗いかということです。
0%から100%の数値で設定します。パーセンテージが上がるほど明るくなります。

記述方法

1つ目に色相、2つ目に彩度、3つ目に輝度の数値を設定します。
色相には単位を入れず、彩度と輝度には%をつけます。

    /* えんじ色っぽい赤 */
    .button {
        background-color: hsl(0,100%,80%);
    }

HSL + a

似たようなものでHSLAというものがあります。AはAlphaの略で透明度です。
0から1の数値で設定します。数値が上がるほど不透明になります。

    /* えんじ色っぽい赤の50%の透明度 */
    .button {
        background-color: hsl(0,100%,80%,0.5);
    }

調整の例

以下のソースはえんじ色っぽい赤を、暗い茶色にする例です。

    /* 01 えんじ色っぽい赤 */
    .button {
        background-color: hsl(0,100%,80%);
    }

    /* 01を濁らせたい場合は2番目の数値を少なくする */
    .button {
        background-color: hsl(0,50%,80%);
    }

    /* 02を暗くしたい場合は3番目の数値を少なくする */
    .button {
        background-color: hsl(0,50%,40%);
    }

色を直感的に捜査するその他の方法

Sassでは元の色からadjust-hueで色相を、saturate / desaturateで彩度を、lighten / darkenで輝度を変更することができます。

上記以外にも補色にするcomplementや2つの色から中間色を作成するmixなどもあります。

あらかじめ変数を作っておけばカラーバリエーションがすぐ作れるので、とても便利です。

最後に

上記の方法はどちらも色の基本を理解していなければ難しいかもしれません。
ですが一度慣れるととても便利ですので、これを機に試してみてはいかがでしょうか。
下記のリンク先がわかりやすいと思います。

HSL COLOR PICKER