2014/03/27 クリエイター

配色に迷った時に頼りになる配色ツール・色辞典

配色に迷った時に頼りになる配色ツール・色辞典 WEBサイトやデザインの配色に悩んだ時、みなさんどうされいますか?
いい配色が決まるまで試行錯誤を繰り返す、一旦別の作業をしてイメージをリセットしてみるなど、工夫されていることかと思います。配色に迷ったら、配色ツールや色辞典に頼るという手もあります。

デザイナーがよく使っている配色ツールをまとめてみましたので、いい配色が思い浮かばない時に是非使ってみてください。

ウェブ配色ツール

日本の配色ツールの中では有名ドコロの「ウェブ配色ツール」。
1色決めるだけで自動に全体の背景、メニュー、ロゴ、見出し、サイドバーなどの色を決めてくれます。
テーマカラーが決まっていれば基本色として指定するだけで配色が表示されるのでとても便利です。

Color Scheme Designer

配色ツールの中では超有名な「Color Scheme Designer」。
こちらも1色指定するだけなので配色を決めやすく、彩度やコントラストの微妙性もできます。
ちょっと分かりにくいかもしれませんが、右のプレビューの下に「Light page example」「Dark page example」がありますので、それらをクリックするとサンプルサイトでの配色プレビューが表示されます。

HUE/360

M&S Judgeをオンにして1色選ぶとその色に適した色だけが残っていく仕組みになっています。
合わない色は表示されないので色が選びやすくなります。

和色大辞典

日本の伝統色を集めた「和色大辞典」。
同じ色でも和名だと雰囲気が違って見えたりするから不思議です。
翡翠色、水浅葱、薄桜、今日ムラサキ、千歳茶、空五倍子色(うつぶしいろ)、勿忘草色(わすれなぐさいろ)などなど、名前だけでなんだかいい配色が浮かんできそうです。

NIPPON COLORS

こちらも日本の伝統色を主体にしたサイト「NIPPON COLORS」。
色を指定するとRGBとCMYKで色を教えてくれます。
とても綺麗なサイトで、色を選ぶと和紙のような背景色が切り替わるのがいいですね。
色のバリエーションは250種類あり、同じ黒(#080808)でも呂(ろ:#0C0C0C)、墨(すみ:#1C1C1C)では微妙な違いがあるので黒の使い分けの参考になります。
すごくデザインセンスがいいサイトです。


 
Webデザインの求人案件 Webデザインの求人案件

Webデザイナーやクリエイターの求人・案件情報です。
制作会社もあれば自社サービスのUIデザイン案件等、幅広く掲載しています。