配色について簡単にまとめてくれてる人がいて助かった<

配色の正解ってよくわからん。ってことで調べているととてもわかりやすい資料がありました。
もちろんこれが絶対の答えとかではないですが、基本の考え方としてノンデザイナーでも理解しやすいです。

7割ベースカラー、2.5割メインカラー、残った部分を数色のアクセントカラーにするといい感じになるという話。

いつも配色の話になると出てくる色相彩度明度というよくわからない単語たち。
こいつらに少し歩み寄ってみた。

色相

MunsellColorCircle
よく見る円のアレ
対象となる色の反対側に配置されている色を補色と言って、アクセントカラーにするといい感じになりやすい。

彩度

スクリーンショット 2016-06-30 18.05.41

色の鮮やかさと思えばいい。彩度が低いほど黒っぽい色になる。

明度

スクリーンショット 2016-06-30 18.05.52

色の明るさ。明度が上がるほど白に近い(薄い)色になる
最初は単純に透明度をあげればいいのかと思っていたけどそうではない。

色の決め方

資料の方法にしたがって色を決めていく。

メインカラー

なるべく明度の低い色を選ぶのがオススメ

明度が高い黄色は読みにくい

明度が低い青色は読みやすい

ベースカラー

スクリーンショット 2016-06-30 18.27.53

メインカラーの明度を下げた色にする。
もしくは明度の高い無彩色や濁色にする。
つまり、薄いグレーとか茶色のこと。

アクセントカラー

スクリーンショット 2016-06-30 18.30.09

これはもうほとんど自由なんだけど基本的には補色とか色相で離れた位置にあるものにするのがオススメです。

配色について思考停止した場合のオススメサイト

やっぱり配色ようわからんわwっていう人向けに2つほどサイトを紹介しておきます。

rgb.to

スクリーンショット 2016-06-30 17.38.39
rgb.to
自分の決めた色にオススメの配色をいくつか提示してくれます。
Sky Gridのメインカラーである水色系の色を選ぶと以下のような感じで配色してくれます。
オレンジとかが補色に当たるのでアクセントカラーとして良いかもしれませんね。

スクリーンショット 2016-06-30 17.34.10

Adobe Color CC

スクリーンショット 2016-06-30 17.38.59
Adobe Color CC

アドビのサービスです。自由に選んでいろいろできるし人気の配色とかフラットデザインとかめちゃくちゃ揃ってます。すごい!

ひとこと

改めて、配色って難しいですね。
迷ったらWEBサービスの力をどんどん借りていきましょう。

コメントを残す

メールアドレスが公開されることはありません。