Webデザインにおいてまず必要になる「配色パターン」ですが、ここで詰まってしまうと、なかなか次に進むことができませんよね・・・。

ただ、魅力的な配色パターンというのは、ある程度決まっていて、自分でゼロから作り出す必要はありません。

今回の記事では、配色で困ったときに参考にしたいサイトを8個ご紹介します。センスある配色パターンを次々に調べることができることができてとても便利です。ぜひ活用いただければと思います。

Adobe Color CC(旧称:Adobe Kuler)

1

Adobe Color CC

最も有名(と思われる)な配色パターンサイトです。
いつの間にか名称がAdobe KulerからAdobe Color CCに変更されていました。

選択した色(5色表示されているうち三角形が下部に表示されている色、デフォルトでは真ん中)
の類似色・モノクロマティック・トライアド・補色・コンパウンド(間色)・シェード、
さらに自由にカスタマイズした配色ルールを表示することができます。

RGBや16進数を入力して色を指定することも可能です。

Paletton

2

Paletton

Adobe Colors CCに似たサイトですが、
色覚障害者の視界やコンディションの悪いディスプレイをシュミレートしてくれます。

詳しくは下記の記事が参考になります。
カラーパレットを直感的に作ってページの見え方を確認できPNG・HTML出力もできる「Paletton」 ? Gigazine

Coolers

3

Coolers

スペースキーを押すと様々な配色パターンを提案してくれるサイトです。
色をクリックするとその色は次回以降の提案でも採用されます。HSBでの調整や16進数での色の指定も可能です。

完全にランダムで色を選んでいるわけではなさそうなので、
配色の発想にある程度の偶然性を持たせたい場合などにオススメです。

グラデーションの配色パターンを調べるなら「0 to 255」

4

0 to 255

指定したベースカラーを中心としたグラデーションを確認することができます。
もう少し濃い色がほしい、淡い色がほしいというときにスムーズに選ぶことができます。

グラデーションの各段階には16進数も表示されるので便利です。

Colores

car

Colores

入力した単語で画像検索を行い、配色を提案してくれます。

試しに「car」と入力してみると上記の画像のようになります。

背景に映っているものの色も含んでしまうので
正確にその単語の表すイメージカラーを提案してくれるわけではありませんが、
思いがけないアイディアを得ることができることもあります。

原色大辞典

6

原色大辞典

原色大辞典というサイトですが、タブでカテゴリーを選択できるようになっています。筆者がいつもお世話になっているのは「和色大辞典」「洋色大辞典」「パステルカラー」「ビビッドカラー」だったりします。

NIPPON COLORS

7

NIPPON COLORS

日本の伝統色を表示するサイトです。
色の日本名、RGB、CMYK、16進数を確認することができます。

オシャレなインターフェイスはとても刺激されますね。
なお、記事執筆時点(2015年1月19日)ではFirefox 35.0にて表示バグが発生します。

Color of Book

8

Color of Book

書籍や雑誌の表紙から、そこで使用されている色を
RGBおよび16進数で確認することができます。
ファッション誌およびスポーツ誌は性別・ジャンル・種別などから検索することも可能です。

まとめ

いかがでしたでしょうか?

配色パターンを自分で決めることに苦手意識を持っている人もかなりいらっしゃると思いますが、魅力的な配色パターンには法則があります。ですから自分で考える必要はありません。今回ご紹介したようなWebアプリやサイトを使って、簡単に配色を決定することもできます。

Webデザインを考える際にぜひお使いください。

おすすめの記事