配色に迷ったら…。カラー選定に役立つWebツール10選！

前回の記事「メインカラー選定に役立つ、12の色がユーザーに与える印象」では色が与える印象を紹介しました。

会社やお店、ブランドなどのイメージカラーがある場合は別ですが、とくに使う色が決まっていない場合、ホームページで商品やサービスにどのような印象を与えたいかで、メインカラーを決めるとよいでしょう。

メインカラーが決まったら、その色に合わせた配色が必要です。
メインカラーが必ずしもベースカラー（一番多く使う色）となるわけではありません。強い色を広い面積で使うと、本当に見せたい商品やサービスよりも強い印象を与えかねないからです。

ベースカラー

一番使う割合が高い色。余白や背景などに用いることが多いため、明度の高い色や淡い色を使う場合が多い。強い色をベースカラーにする場合は、文字の色に白系の色を用いて、可読性を高める。割合の目安70~75％程度。

メインカラー

ホームページや会社、商品などを印象付けるためのキーとなる色。メインカラーがベースカラーとなる場合はアクセントカラーをでバランスを取る。割合の目安　20~30％程度。

アクセントカラー

全体を引き締めたり、デザインにアクセントをつけるために使う色。メインカラーの補色を使うことが多い。割合の目安5％程度

しかし、実際にサイトをデザインする場合において、メインカラーが赤、青、黄色といったはっきりした色とは限りません。中間色をメインカラーに使うことも多く、その場合は、配色の微妙なバランスがむずかしいのです。

そこで、配色を考えるときによく使っているサイトやツールを紹介したいと思います。

カラー選定で役立つWebサービス＆ツール

サイトをデザインする際によく使うWebサービスと、便利なツールを紹介します。すべて無料のものなので、とりあえず触ってみて、自分に合うものをつかうとよいでしょう。

【1】flatuicolors

近年流行している「フラットデザイン」によく用いられる色が掲載されています。色数は少ないのですが、その分迷うこともないので使いやすいサイトです。色をクリックすることで、その色の16進数をコピーすることができます。

【2】guidelinecolour

大手Webサービス、ポータルサイトなどのメインカラーが載っています。「○○みたいなホームページにしてほしい」と依頼されたときなどに参考にします。

【3】colorschemedesigner

メインカラーを入力することで、さまざまな配色パターンを調べることができます。最近、機能が強化されてより使いやすくなりました。

【4】Color of Book

雑誌の表紙の配色を調べることができます。直接雑誌名を入力して調べることもできますし、ファッション誌、スポーツ誌、性別、年齢などで検索することもできます。
photoshop用カラーパレットをダウンロードすることができます。

【5】Web Color Data

有名サイトがどのような配色を用いているのか調べることができます。URLを入力すると、そのサイトのデータを知ることができるので、競合サイトの分析などにも役立ちます。

【6】原色大辞典

色の名前や16進数を調べることができます。地下鉄のメインカラーが掲載されていたり、ストライプを生成できるツールなど機能も充実しています。
言葉を入力して、色を分析する成分解析は、参考にはなりませんが、楽しくておススメです。

【7】adobe kuler

adobe社のオンラインカラーツール。Webブラウザ上で、配色テーマを作成したり、他の人が作ったテーマを探すことができます。
オンライン版のカラーライブラリとでも言えばよいでしょうか。adobeなので、公開されているテーマをphotoshopやIllustrator用のスウォッチとして取り込むこともできます。

【8】Web　Site Color Picker

URLを入力することで、サイトの配色データを調べることができます。抽出した色をピックアップして、自分用のカラーパレットを作成し保存することもできます（twitterとの連携が必要）。

【9】ColorPick Eyedropper

choromeの拡張機能。閲覧しているWebサイトの 色を16進数で取得することができます。photoshopやIllustratorなどで作業しているときに、このサイトのこの色を使いたい！というときにわざわざスクリーンショットを取る必要がなく、かんたんに色を拾えます。

【10】colorZilla

firefoxのアドオン。閲覧しているWebサイトの色を調べられます。知りたい部分マウスを乗せると、RGB値や16進数を知ることができます。さらにクリックすると、16進数の値をコピーすることができます。