フラットアイコンで使われるカラー選びのポイントを考えてみた

CSS on ,

巷で?まだまだ使われるフラットアイコン。
いざ作ってみるとカラーチョイスが微妙というかなんというか、、
これでいいのか。。?みたいな変な疑心が生まれることも。

そんな時は
flatuicolors.comで確認すると、「やっぱこれでよかったんだ…」みたいに
安心できるかもしれません。逆もしかり。

http://flatuicolors.com/

めでたしめでたし!!

と言いたいところですが、、
そもそもどんな規則性があって選ばれたカラーたちなんだ、、
ってことでflatuicolors.comで使われているカラーたちを
photoshopカラーピッカーをキャプチャーして並べてみました!
マメだなー!

■グリーン系

1
2

■ブルー系

3
5

■パープル系

4

■イエロー系

6

■オレンジ系

7

■レッド系

8

■モノトーン系

9

いかがでしょう!

バーっと見ても「だから何?」って感じですが

着目したいのが

「彩度」です。

彩度ってどこみればいいでしょう。
「HSV」の項目を見てください。

ちなみにHSVとは

色相(Hue)
彩度(Saturation)
明度(Value)

の三つの要素をつかった色の表現方式です。

パープル系・ブルー系・グリーン系は彩度が50~70あたりで少し低めに
イエロー系・オレンジ系・レッド系は彩度が高めの70~90あたりです。
(モノトーンには彩度求めちゃだめですね。カラーになっちゃいます。)

フラットアイコンに使われるカラー全体的に言えるのが
彩度をある程度抑えてそれでも鮮やかに見えるギリギリラインで選ぶのがポイント
ってところでしょうか。

そして付け加えて。。。

flatuicolors.comの全ての色にそれぞれのカラーの説明文字が乗ってますが
モノトーンを除くと全て白文字で記述されてますね~~。
flat

つまりその色の上に白文字を上に乗せても読める状態っていうのもひとつ
ポイントといえるでしょう。

このあたりを意識して
作ってみてはいかがでしょうか!