色を作る時はHSBで考えるのが良き！

今回は色についてのお話です

CSSで色を指定すると言われて想像するのはどんなものでしょう ？

恐らくカラーコードというものを指定しているかと思います。
(#FFFFFFみたいなやつ。16進数ですね。)

勿論、色を指定するだけならカラーコードでも良いのですが、

色を作る

という観点だとカラーコードは色が想像しにくいという難点があります。

HSBという考え方

HSBはHue(色相) Saturation(彩度) Brightness(明度)の略で、
カラーコードとは違い、各数値で色を指定することができます
各指定できる範囲はこんな感じ
色相 : 0 - 360
彩度 : 0 - 100
明度 : 0 - 100

(下記画像は私の師匠のデザイナーからいただいた貴重な画像です )

色相

色相は、上記画像に見える虹色のバーの部分で、色の様相の相違を表します。
グラデーションを作るときは、色相の流れに沿って色を選択すると、
濁らずに綺麗なグラデーションを作ることができますョ🐥

彩度

彩度は色の鮮やかさ度合いを調整することができます。
色味を濃くしたり薄くしたりすることができるので、色味が強すぎたときに彩度を下げたりすると、淡い感じの色をつくることができます(パステルカラーとか)。
白 - (自分の指定した)色の間を行くので色を濁らせる働きはしないのが特徴です。

明度

明度は色の明るさを調整することができます。
数値が低ければ低いほど暗くなっていきます。
あまり低くしてしまうと色が濁ってきてしまうので注意が必要です。
(特に黄色はくすみやすいので上級者向けです)
慣れないうちは100の状態で固定しておくのも有りかもしれません。
彩度とは違い、こちらは黒 - (自分の指定した)色の間を行くので、
色を薄める働きはしないです。

HSBの使い方

HSBを使いこなすには以下の手数を踏む必要があります

1. 色味を決める(H)
2. 彩度(S)・明度(B)を決める
3. 微調整する

1. 色味を決める(H)

上記画像にも記載ありますが、
例えば青を作りたいときは170 - 240の間でHの数字を指定します。

2. 彩度(S)・明度(B)を決める

おさらいになりますが、
彩度と明度は以下の特徴があります。

• 彩度は数値が高ければ高いほど鮮やかに
• 明度は数値が高ければ高いほど澄んだ色に

上記を踏まえて、デザインをする上での色の役割に併せて決めていきます。
もし、今回作る色が(メイン / ベース / アクセント)でいうアクセントカラーであれば、
ユーザーの目を引く鮮やかな色を選ぶ必要があります。

鮮やかな色を作るにはどうすればよいかもうお分かりですね？

彩度と明度の数値を100に近づければOKです
(ただ、どちらも100に振り切ると色によってはキツイ印象を与えるので
色をみながら適宜調整してみてください)

実際にiOSのapple公式で出しているミュージックアプリや
App Storeアプリではアクセントカラーの明度が100になってます

3. 微調整する

おおよその数値を決めてもなんだかしっくりしない場合は、
HSBの数値を少しずつ弄ってみましょう。
同じ青でも緑寄りの青や紫寄りの青によって色相の最適数値が変わってくるので、
ひたすら色々な数値を入れてみるのも良いかもしれません

このように、HSBを使うと直感的に明るい色や鮮やかな色を指定することができるという
最大のメリットがあるんです

ここまでできたらHSBの基本を習得したと言っても過言ではないでしょう

HSBに慣れると

街中の色がどのように構成されているかがわかるので楽しいです
※個人的な意見です

例えば
「あの緑薄いけど、澄んだ色してるから、明度高めの彩度低めかな〜」
とか
「あの赤なんかくすんでる〜ちょっと明度低い気がするな〜」
とか
色に対して意識するだけで、何だかちょっと世界が広がる気がしません？

CSSでHSBを扱う

ただ、一点注意しないといけないのは、CSSではHSBではなく、
HSLで色を出力することになります。(Hue(色相)、Saturation(彩度)、Lightness(輝度))
HSBに似てはいますが、別物なのでそのままの数値をHSLに指定しても思った通りの色は出てきません......

そういうときこそSassのFunctionの出番です
こんな感じでFunctionを作ってあげると

// @function hsb: HSBに変換する
// @param   {String} : $h-hsb: Hue(色相)
// @param   {String} : $s-hsb: Saturation(彩度)
// @param   {String} : $b-hsb: Brightness(明度)
// @return HSB color
@function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1)
    @if $b-hsb == 0
        @return hsla(0, 0, 0, $a)
    @else
        $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100))
        $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2)
        @return hsla($h-hsb, $s-hsl, $l-hsl, $a)

HSBをそのまま使うことができます

$blue: hsb(200, 100, 100)

これでもう色は迷うことなくHSBが使えますね
色についてもっと深めたい方はぜひHSBを使ってみてください〜！