【デザイン】色の組み合わせが簡単に作れるWeb配色ツール10選

ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。

ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。

ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。

今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。

Web配色ツールのご紹介

それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。

HUE/360

HUE/360は、1つのキーカラーと調和する色を教えてくれるWebツールです。

カラーパレットに円形で並ぶ色から、メインとして使う色をクリックすると、選択できる色が減っていき最初に選択した色にマッチする色だけが残っていきます。

選択した色は下部に保存されていき、自動的に選択した色に調和するカラーコードを手にいれることができます。

サイト自体のデザインもシンプルで使いやすいのが特徴。有名なスライドのノンデザイナーのための配色理論でも、HUE/360の使い方がとりあげられています。

▷ HUE/360

Paletton – Color Scheme Designer

Palettonは、カラースキームを自動で決めてくれるWebサービスです。

ベースカラーを1つ選択すると、右側に補色する色を複数表示してくれます。右下にある「EXAMPLE」を押すと、Webページにカラーコードを合わせた時のサンプリルページが見れるのは本当に便利です。

気に入った配色が決まれば、Photoshopのカラーパレットや「HTML+CSS」や「XML」で書きだすこともでき、操作した作業を「REDO」によって1つ前に戻せるのも嬉しい機能の1つです。

▷ Color Scheme Designer

colourcode

colourcodeは、自分が求めるカラーコードやカラースキームをワンクリックで簡単に作成できるツールです。

画面にマウスをおくと色が自動的に変更され、自分が求めている色が現れた時に、クリックを押すと色が保存されていきます。画面の右にでるプラスボタンを押すと色がどんどん追加されていきます。

画面をクリックして複数の色を選択したのち、右カラムのメニューからカラーコードを生成すると、PNGやLESS形式に保存することができます。色を決めるという行為1つですが、気持ちのいいUXとなっています。

▷ colourcode

Japanese Traditional Colors – 2xUP

2xUPは、日本の伝統色を見本と一緒に、名前ととRGB数値 (カラーコード) と合わせてリストで表示してくれるWebサイトです。

表示される色の中には、葡萄茶 (えびちゃ) や肉桂色 (にっけいいろ) 利休色 (りきゅういろ)など、普段の生活ではなかなか出会えない色を発見できるので、スクロールしているだけで楽しいです。

▷ 2xUP

ウェブ配色ツール Ver2.0

仮想ページをプレビューを見ながら、好きに配色を試すことができるジェネレーターです。

テーマカラーを1色選ぶと、それにあった配色を合わせてくれる便利なツール。使い方は、画面右上のカラーピッカーを操作していくと、配色が自動的に完成します。またその下にある操作パネルを操作することで、カスタマイズも可能です。全体の背景から、ロゴの色まで様々な箇所の色を変更することができます。

▷ ウェブ配色ツール Ver2.0

colr.org

colr.orgは、画像から色を抽出してカラーパレットを自動でつくれるWebサービスです。

「Random flickr image」を使ってFlickrから写真をランダムで選べるのと、「Load your own」で自分で写真をアップロードしてカラーコードを抜き出してカラーパレットをつくることもできます。抽出した色にマウスをあてるとカラーコードを見ることもできます。

▷ colr.org

Sphere: Color Theory Visualizer

▷ Sphere: Color Theory Visualizer

Sphereも、色を1つ選択すると簡単にカラーリングが作れるサービスです。

色彩のにマッチする構成で色が出力され、AIやPhotoshop（.AOC）形式で保存ができます。

パターンが複数あり、例えば「Neutral（連続した色の組み合わせ）」、「Analogous（Neutralよりもう少し色の差がある）」、「Websafe（Webセーフカラー：赤・緑・青をそれぞれ6段階の216色に分けて定義する色の集合体）」などでカラーリングすることができます。

▷ Sphere

Multicolor Engine

Multicolor Engineは、指定する色から複数の画像を探せるサービスです。

ここに表示される画像は、Flickrにアップされてる「CreativeCommons」の画像です。色の割合を指定するとその色にあった画像が一覧で表示されます。

▷ Multicolor Engine

色見本と配色サイト

色見本と配色サイトは、様々なカテゴリから色の見本を選べる配色Webツールです。

ここでは、Web上のフルカラーで表現できる1600万色の色の見本を見ることができます。

赤、橙、黄、緑、シアン、青、紫、ピンク、茶、白、黒のカテゴリから、その色に関連する画像、Webサイト、関連する色をを一覧で見ることができます。色を選択するだけで、参考サイトがすぐに見つかるのはありがたいです。

▷ 色見本と配色サイト

NIPPON COLORS

NIPPON COLORSは、日本を代表する配色サイトといっても過言ではないかもしれません。

日本の伝統色を、色の名称からその色の「RGB・CMYK」まで見ることができます。サイト自体はHTML5で作られおり、右の MUNSELLを「ON」にすると3Dになるこだわりもすごいです。

楽しい動きと共に日本の伝統食が学べるので、色に興味がない人がみても楽しいサイトになっています。また、この「NIPPON COLORS」のサイトはSafariかChromeのブラウザでのみ閲覧可能なのでご注意ください。

▷ NIPPON COLORS – 日本の伝統色

色の組み合わせの見本に！

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

色には合う組み合わせと、そうではない組み合わせが存在します。感覚で配色を行うのも良いですが、配色に理由づけがあると説得しやすいことと、やはり合理的な配色の組み合わせはデザインとしても目を惹くものがあります。

次回、Webサイトやチラシやポスターロゴなど、配色を決める場面があればぜひこれらのツールを利用してみてください。