HSBカラーモデル

HSBカラーモデルとはコンピューター上で扱う色を数値化したものの一つで、色の三属性である*色相(Hue)・彩度(Saturation)・明度(BrightnessまたはValue)*を用いて色を指定するものです。

OSやソフトウェアによってはHSBをHSVと呼ぶこともありますが、ここではPhotoshopやIllustratorでも採用されている通り、HSBで統一して話を進めていきます。

実生活から見えるカラーバリエーション

さて、部屋を見渡すと、いろんな色が目に飛び込んできます。
そして、特に際立って色のバリエーションを作っている箇所があります。

それは*「影」*です。

影は、ベースカラーを暗くしたものだと考えることができます。

3.png

さて、先ほど見てきたとおり、HSBによって配色を分析してみましょう。

4.png

数値を見て明らかですが、明度が下がっていますね。
しかしそれだけでなく、彩度が上がっているのにお気づきでしょうか。

もうひとつ例を見てみましょう。

5.png

さて、こちらはどうでしょうか。HSBを確認してみましょう。

6.png

見比べてみて、どうでしょうか。
やはり同じパターンになっていますね。

つまり、ベースカラーと影(ダークカラー)のバリエーションの関係を見てみると、明度が下がるだけでなく、彩度が上がっています。
あなたのホームページやアプリで１色のブランドカラーからUIの配色を決める場合、*「明度を下げて、彩度を上げる」*というルールにのっとればいいことになります。

Facebookのカラーリングルール

さて、改めてベースカラーとダークカラーの関係を挙げると以下のようになります。

ダークカラー　→　明度を下げて、彩度を上げる

もう一度、Facebookのベースカラーと検索窓の配色を確認してみましょう。

7.png

やはり、明度が下がっている一方で、彩度は上がっていますね。
もし検索窓がベースカラーに黒い半透明のオーバーレイがかかっただけだとしたら、明度は下がりますが、彩度には影響しません。
これが*「検索窓部分に黒いオーバーレイがかかっているわけではない」*と断言できる理由です。

さて、もう一方の「ライトカラー」の部分に関してです。
もうお気づきかと思いますが、逆のことをすればいいのですね。

ライトカラー　→　明度を上げて、彩度を下げる

明度と彩度の調節によって、ベースカラーからダークカラーとライトカラーが作り出されました。