色相について

ここまで、Facebookの3つの色がどのようにして作られているのか、またそれを応用して自分たちが３つの色をつくるにはどのようにすればいいのかをご紹介しました。
ポイントは、HSBのS(色相)とB(明るさ)をルールに基づいて調整することです。
しかし、H(色相)については、上がっているものもあれば、下がっているものもありましたね。
これはどういうことでしょうか。

以下に示すのは、「HSB色相環」と呼ばれる色相を環状に並べたものです。
「HSB色相環」はS(彩度)とB(明るさ)を100％にしているので、色相の違いだけを確認することができる色相環です。

8.png

ここで着目してほしいことがあります。青色と黄色はどちらも100％の彩度・明るさですが、どちらのほうが明るく見えるでしょうか。
自信を持って、「黄色」だと答えられますよね。
これは、彩度・明るさが同じでも、色相によって持っている光度(Luminosity)が違うからです。

9.png

光度と色相の関連性はなく、ばらばらなことがわかります。
そして彩度・明るさを調整すれば、光度も変化し、自然と別の色の方向に色相が推移していきます。
彩度・明るさを調整することで自動的に色相も変わるということがご理解いただけたのではないでしょうか。

まとめ

以上、FacebookのUIを切り口に、ブランドカラーとUIの配色の相関性について考察してみました。
配色に関してはさまざまな理論がありますが、今回はFacebookでも実際に使われている配色を例に解説したので、実践的に使えるのではないでしょうか。

もしテーマカラーの選定に悩んでいるようでしたら、下記の記事を参考にしてみてください。
伝えたいイメージに沿って、核となる１色を選ぶ手助けをしてくれます。

参考：
ノンデザイナーがクオリティの高いWebデザインを作成する時に気をつけたい4つのポイント