配色なんてこわくない

By b_kimura,

  Filed under: デザイン勉強
  Comments: None

配色参考

※ (株)プロトン・シモヤマ寄稿

配色ってムズカシイ。

お客さんから、メインの色を指定されることは結構あるけど

じゃあそれを何色と組み合わせよう?ってなります。

 
そんな時は、これ!
 

良い感じな配色を教えてくれるツール

colorschemedesigner
 
配色参考

メインカラーを指定すると、良い感じな組み合わせを教えてくれます。

配色パターンは、

mono(単色)
→単調。落ち着いてみえる。
complement(補色)
→アクセントに最適。使いすぎ注意。
triad(色相環の中の、正三角形に位置する3色)
→バランスに注意。でもインパクト大!
tetrad(主の2色と、その補色の2色)
→攻めの配色!取扱い注意。
analogic(類似色)
→落ち着いて、エレガントな印象。
accented analogic(類似色+補色)
→効果的に使えたら、エレガントかつ訴求力の高いデザインになりそう。。

の6通り。

デザインから与えたい印象によって
どの配色パターンにするか決めると良さそうです。

 

サンプルでイメージ!

配色がわかっても、実際に使うとなるとバランスがムズカシイ・・・そんな人も、大丈夫。
この配色パターンを使ったwebデザインのサンプルを見ることが出来ます。

配色デザイン

おー、おしゃれー。

こちらは明るいバージョンと暗いバージョンの2パターン。

 

ただ、この配色をそのまま使うとビビットすぎて、
「目がぁー」って感じなので

 
彩度を落としてみたり

配色パターン

なんかにごっててヤだなって人は

ここから2色くらいもらって+無彩色(白、黒、グレー)
とか良いんじゃないでしょうか。

わたしはよく、
メインカラー+ポイントカラー+ベースに白かグレー
って感じで使わせてもらってます。

 

高機能、なのにサクサク!

ここまでいろんな機能を紹介してきたわけですが、
この子、他にもこんなことが出来ます。

・使っている色のカラー番号表示
・ランダムに色をピックアップ
色の見え方が異なる人にどう見えているか、チェック
・色見本の出力
cap_csd4

これだけ色々出来るのに、サクサクーっと快適に使えます。すごい。

配色に困った時は、お試しあれ。