2016年1月16日

Webデザイナー必見!配色がデザインの印象を大きく左右する

ここの色どうしよう…と悩んだら!Webの配色デザインに役立つ無料カラーツール12選

ここの色どうしよう…と悩んだら!Webの配色デザインに役立つ無料カラーツール12選

配色に行き詰まり、考えても考えてもいいデザインが思い浮かばない…。
そんな時はないですか?
一旦休憩してリフレッシュすると思いつく時もありますが、リフレッシュしても思いつかない、もしくはあまり時間をかけられない時には、カラーツールが頼りになります。
 
カラーツールが配色パターンを自動生成してくれたり、配色のヒントをくれたりするので、悩んだ時に使えば配色の行き詰まりを突破できます!
今すぐ使わなくてもいつか使う時用にブックマークしておきたい、無料のカラーツールを12個ご紹介したいと思います。
 


Adobe Color CC(Adobe Kuler)

 
サイト:https://color.adobe.com/create/color-wheel/

元々は「Adobe Kuler」という名称でしたが、「Adobe Color CC」に変更されています。
「Adobe Color CC」はAdobeが提供している無料の配色パターンツールで、類似色、モノクロマティック、トライアド、補色などカラールールを指定して配色パターンを作成することができます。
直感的に使えるので、配色に迷った時に役立ちます。
 
Adobeのアカウントがあれば配色テーマを保存したり、PhotoshopやIllustrator等のAdobeソフトと連携させて作成した配色テーマを使うことができます。
 
 


Material UI Colors

 
サイト:http://www.materialui.co/colors

Googleが公開している新しいUX(ユーザーエクスペリエンス)デザイン「マテリアルデザイン」で使用可能な色を並べたカラーツールです。
カラーをクリックするだけでカラーコードがコピーできます。
一覧性が高く、直感的な操作が可能です。
 
「マテリアルデザイン」は最近注目が集まっているので、今のうちに学んでおくといいかもしれません。
他にフラットデザインで使える色をまとめた「Flat UI Colors」も提供しています。
 
【このツールのその他の機能】
・スマホ画面を模したプレビュー表示がある
 
 


Color Scheme Designer3

 
サイト:http://colorschemedesigner.com/csd-3.5/

少しわかりづらいですが、まず最初に色相環の上にある5つの配色パターンを選びます。
次に色相環上のピッカーを動かして細かい色味を調整していきます。
ピッカーを動かすだけで指定した色に基づいたカラーパターンを生成してくれるので、配色の助けになります。
 
【このツールのその他の機能】
・「Adjust Scheme」で選んだカラーパターンの明暗をつけられる
・「Light page example(明るい版)」と「Dark page example(暗い版)」のプレビューサイトが見られる、など
 
 


color hailpixel

 
サイト:http://color.hailpixel.com/

キャプチャ画像では5つ色が並んでいますが、初期状態は単色、#000000=黒一色の画面から始まります。
画面上でマウスポインタを動かすと色が変わり、マウスをクリックするとその色が保存されます。
保存された色の隣に新しい色ができるので、ポインタを動かしながら色を調整し、またクリックします。
この繰り返しで直感的に配色を決めていけるカラーツールです。
 
一旦決めた色も後から微調整できるので、とりあえずこんな感じの配色はどうかなと大雑把に決めていくのもいいかもしれません。
 
【このツールのその他の機能】
・配色がURLのパラメータとして残るので、保存しておける&共有も簡単
・機能自体がシンプル
 


COLOUR CODE

 
サイト:http://colourco.de/

こちらも先ほどの「color hailpixel」と同じように、ポインタを動かしながら、どんどん色を追加できるカラーツールです。
monochrome、analogic、triad、quadなどのパターンが用意されています
 
作成した配色パターンはSCSS、less、pngなどのファイル形式でダウンロードできます。
操作感は「color hailpixel」と似ていますが、「COLOUR CODE」の方が機能が充実しています。
 
 


Coolors

 
サイト:https://coolors.co/

キーボードのスペースキーを押す度、5色のカラーパレットをランダムで自動生成してくれます。
生成されたカラーパレットは、それぞれ色を微調整することができます。気に入った色があれば、ロックをかけておくこともできます。
配色に行き詰まった時に使ってみるといい配色が見つかるかもしれません。
いろいろなパターンが出てくるので、頭がリフレッシュされて違った角度から配色を考えられます。
 
【このツールのその他の機能】
・これも、配色がURLのパラメータとして残るので、保存しておける&共有も簡単
 
 


0 to 255

 
サイト:http://www.0to255.com/

最初にカラーパレットから一色選ぶ、またはランダムで生成するボタンを押すと、ベースカラーに基づいてグラーデーションを生成してくれます。
ランダムボタンを押すと、どんどん自動生成してくれるので、グラーデーションの配色に悩んだ時に使ってみるといいかもしれません。
表示されているカラーコードは、カラー名をクリックするだけでコピーできるので楽ちんです。
 
 


Coleure

 
サイト:https://www.coleure.com/

カラーパレットから色をひとつ選択すると、画面右側にテキストの白抜き・黒抜きイメージを生成してくれます。
テキストベースのデザインや、ロゴやボタンなどを作成する時の参考になります。
下にスクロールしていくと、カラーパレットがどんどん出てきます。
画面隅にある文字が見切れているのは、あえてそういうデザインにしているのでしょう。
 
 


NIPPON COLORS - 日本の伝統色

 
サイト:http://nipponcolors.com/

日本の伝統色を収録したカラーツールで、指定した色の名前とCMYKとRGBの数値を表示してくれます。
色をクリックするとゆっくりと背景がその色に切り替わります。
見慣れない伝統色がたくさんあって、見ているだけでワクワクしてきます。
 
たとえば桃と桜は色が近いイメージがありますが、桜は案外色が薄めなので、意外と差があるんですよね。他にも隣り合っている桔梗と藤紫でも違っているので、和風のデザインや、繊細な色を求めているときに重宝します。
 
 


Bada55

 
サイト:http://bada55.io/

こちらも色ごとに名前が表示されているのですが、ひとつ大きな違いがあります。
それは実際の名前ではなく、カラーコードを単語に置き換えている点です。
ちょっとしたジョークのような感じなので、気楽に見るとよいでしょう。
 
たとえば#C55なら「5」が「S」に近いので「CSS」、#101なら「LOL(英語のスラングで(笑)の意味」など、そう見えなくもない名前をつけています。
#707020=「TOTORO」はちょっと強引な気がしますが、#FB1=「FBI」とか、#DE1E7E=「DELETE」とかなかなか面白いものもあります。
配色の参考というより、息抜きですね。
 
 


BrandColors

 
サイト:http://brandcolors.net/

Adobe、Airbnb、Amazon、Bing、Dell、Dribbble、Dropbox、FedEx、Firefox、Flickr、iOS、JQuery、LinkedIn、McDonald's、Microsoftなどなど。
有名な企業やWEBサービスのブランドカラーをまとめているカラーツールです。
様々な業種のブランドカラーが、一覧で見られます。
 
単色のブランドもあれば、複数の色を使用しているブランドもあり、こうやって色だけ抜き出してみると、どういう色で構成されているのかがよくわかります。
 
【このツールのその他の機能】
・気に入ったブランドは「Collection」ボタンからCSSやLESSなどでダウンロードできる。
 
 


COLOURlovers

 
サイト:http://www.colourlovers.com/

こちらはユーザーが配色を投稿するコミュニティサイトです
カラーツールとはちょっと違いますが、他の人が作ったカラーパレットを見て「あ、こういう配色もあるんだ」と刺激を受けられます。
コメントや投票機能があるので、どんな色合いが人気なのかもわかりますね。
もちろんそのまま流用はできませんが、このサイトはこういう系統が似合いそうとか、突破口を見つけられるかもしれません。
 
 


いかがでしたか?紹介した12個のツールの中に、気にいるものは見つけていただけたでしょうか。
今回ご紹介したツールが少しでも作業の助けになれば幸いです。

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

Webデザイナーの案件を見る