配色で迷った時の無料ツール

ホームページ制作を仕事にしているので、配色についてはほんとうによく悩みます。
ホームページのおおよそのデザインは配色と設置する画像に左右されるといっても良いので毎回最後まで悩みます。

もともとデザインセンスがあるとはいえないので、たくさんのサイトのお世話になっております。
今回は私がお世話になっている配色に使えるツールやサイトをご紹介していきます。

まず色彩全体が見られるサイトからご紹介します。

こちらは背景色と文字色の組み合わせがチェックできます。
左側の背景色の部分で好きな色をクリックすると、ブラウザ上の背景が選択した色に変更されます。
同じように右側の文字色の部分で色を選択すると、ブラウザ上の文字色が選択した色に変更され実際に背景色と文字色の組み合わせイメージを確認する事ができます。

配色によっては文字が見辛くなってしまう事があるので、背景色と文字色の組み合わせはとても重要です。

また色見本では、和色大辞典、洋色大辞典、パステルカラーなどカテゴリー分けされておりテーマ別の参考になります。

こちらは大まかな色別で一覧表示をしてくれるサイトです。
テーマカラーが決まっている場合、例えばグリーン系だった場合、サイト上部の緑のボタンをクリックすると緑色系の色がまとめられます。

緑がメインの画像、実際に緑をテーマカラーにしているサイト例と組み合わせられてる色コードも表示されておりとても便利です。

一言で緑と言っても、明るい緑やブラウン系の緑など様々です。
実際に緑色系 Colorsの中のカラーをクリックすると、その色を基本に色相別、彩度別、明度別、輝度別で前後のカラー一覧が表示されます。

色の組み合わせパターン

次に色の組み合わせ方の参考に使えるサイトをご紹介します。

基本の１色を選択すると、それに合わせて背景、メニュー、見出し、サイドバーの組み合わせ配色を決めてくれます。
その配色で実際のサイトイメージを瞬時に表示してくれるので、イメージしやすいです。

いまのところ、無難な１パータンのみしか表示してくれないので少し物足りない気もしますが、初心者の方にはわかりやすいかと思います。

私の一番お気に入りのサイトです。
自分で配色すると、何となくパターンが決まってきてしまうのですが、このサイトを使うと自分が思い付きもしない配色パターンを提案してくれるので配色に行き詰った時はお世話になってます。

使い方は表示された色を好きか嫌いかクリックしていくだけ。 好き（like）をクリックすると、その色にあった色を一色ピックアップしてくれます。 ピックアックされた色も好き、嫌いを選択すると、どんどん配色が増えていきます。
配色がマンネリ化してきたら使ってみてください。

こちらはいくつもの配色パターンが集められているサイトです。 ユーザーが投稿したもので、いいなと思った配色パターンにはハートが付けられていくのでハートの数を見るとどの配色が人気なのかすぐわかります。
色をクリックするだけでカラーコードがコピーできるので便利です。

こちらは画面をクリックするたびに二色の配色パターンを提案してくれるサイトです。 気に入らない場合は画面上をクリックすると次の配色を提案してくれます。
気に入った配色が見つかったら「スペースキー」または下にスクロールすると、配色にあった色を提案してくれます。

 こちらのサイトもcolorhuntと同様、センスの良い配色を提案してくれるのでお気に入りのサイトです。

４０パターンの配色をカテゴリー別に紹介しているサイトです。 配色パターンをクリックすると、配色プレビューのサイトイメージの配色が実際に変更され具体的にイメージできます。

「万人受けする配色」、「親近感を感じさせる配色」、「クール系の配色パターン」、「元気・アクティブ系の配色パターン」、「かわいい系の配色パターン」、「個性的な配色」とカテゴリー分けされているので探しやすいです。

サイトにグラデーションをつかうとグッとおしゃれな感じになります。 グラデーションを使ってみたいと思ったら下記のサイトをのぞいてみてください。

とても可愛らしいグラデーションから個性的なグラデーションまでいろいろなグラデーションパターンが紹介されています。 ワンクリックでCSSコードをコピーできるのも便利でよいです。

いかがだったでしょうか。
 少しでも配色に悩む方の助けになるとうれしいです。