【デザイン】色の組み合わせが簡単に作れるWeb配色ツール10選ツイート3シェアはてブ568Pocket381ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。Web配色ツールのご紹介それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。HUE/360HUE/360は、1つのキーカラーと調和する色を教えてくれるWebツールです。カラーパレットに円形で並ぶ色から、メインとして使う色をクリックすると、選択できる色が減っていき最初に選択した色にマッチする色だけが残っていきます。選択した色は下部に保存されていき、自動的に選択した色に調和するカラーコードを手にいれることができます。サイト自体のデザインもシンプルで使いやすいのが特徴。有名なスライドのノンデザイナーのための配色理論でも、HUE/360の使い方がとりあげられています。DesignerPalettonは、カラースキームを自動で決めてくれるWebサービスです。ベースカラーを1つ選択すると、右側に補色する色を複数表示してくれます。右下にある「EXAMPLE」を押すと、Webページにカラーコードを合わせた時のサンプリルページが見れるのは本当に便利です。気に入った配色が決まれば、Photoshopのカラーパレットや「HTML+CSS」や「XML」で書きだすこともでき、操作した作業を「REDO」によって1つ前に戻せるのも嬉しい機能の1つです。Designercolourcodecolourcodeは、自分が求めるカラーコードやカラースキームをワンクリックで簡単に作成できるツールです。画面にマウスをおくと色が自動的に変更され、自分が求めている色が現れた時に、クリックを押すと色が保存されていきます。画面の右にでるプラスボタンを押すと色がどんどん追加されていきます。画面をクリックして複数の色を選択したのち、右カラムのメニューからカラーコードを生成すると、PNGやLESS形式に保存することができます。色を決めるという行為1つですが、気持ちのいいUXとなっています。合わせてリストで表示してくれるWebサイトです。(りきゅういろ)など、普段の生活ではなかなか出会えない色を発見できるので、スクロールしているだけで楽しいです。Ver2.0仮想ページをプレビューを見ながら、好きに配色を試すことができるジェネレーターです。テーマカラーを1色選ぶと、それにあった配色を合わせてくれる便利なツール。使い方は、画面右上のカラーピッカーを操作していくと、配色が自動的に完成します。その下にある操作パネルを操作することで、カスタマイズも可能です。全体の背景から、ロゴの色まで様々な箇所の色を変更することができます。Ver2.0colr.orgcolr.orgは、画像から色を抽出してカラーパレットを自動でつくれるWebサービスです。own」で自分で写真をアップロードしてカラーコードを抜き出してカラーパレットをつくることもできます。抽出した色にマウスをあてるとカラーコードを見ることもできます。VisualizerSphereも、色を1つ選択すると簡単にカラーリングが作れるサービスです。色彩のにマッチする構成で色が出力され、AIやPhotoshop(.AOC)形式で保存ができます。パターンが複数あり、例えば「Neutral(連続した色の組み合わせ)」、「Analogous(Neutralよりもう少し色の差がある)」、「Websafe(Webセーフカラー:赤・緑・青をそれぞれ6段階の216色に分けて定義する色の集合体)」などでカラーリングすることができます。Engineは、指定する色から複数の画像を探せるサービスです。ここに表示される画像は、Flickrにアップされてる「CreativeCommons」の画像です。色の割合を指定するとその色にあった画像が一覧で表示されます。Engine色見本と配色サイト色見本と配色サイトは、様々なカテゴリから色の見本を選べる配色Webツールです。シアン、青、紫、ピンク、茶、白、黒のカテゴリから、その色に関連する画像、Webサイト、関連する色をを一覧で見ることができます。色を選択するだけで、参考サイトがすぐに見つかるのはありがたいです。COLORSは、日本を代表する配色サイトといっても過言ではないかもしれません。日本の伝統色を、色の名称からその色の「RGB・CMYK」まで見ることができます。MUNSELLを「ON」にすると3Dになるこだわりもすごいです。楽しい動きと共に日本の伝統食が学べるので、色に興味がない人がみても楽しいサイトになっています。COLORS」のサイトはSafariかChromeのブラウザでのみ閲覧可能なのでご注意ください。色の組み合わせの見本に!いかがでしたでしょうか?色には合う組み合わせと、そうではない組み合わせが存在します。感覚で配色を行うのも良いですが、配色に理由づけがあると説得しやすいことと、やはり合理的な配色の組み合わせはデザインとしても目を惹くものがあります。次回、Webサイトやチラシやポスターロゴなど、配色を決める場面があればぜひこれらのツールを利用してみてください。この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイート3シェアはてブ568Pocket381この記事をかいた人creive編集部creive(クリーブ)編集部です。世の中に存在する"クリエイティブ"なものごとを、"アーカイブ"していきます。