1. まとめトップ
  2. IT・ガジェット

【色の見本】使えるweb配色ツール

Webデザインで使えるWeb配色ツールを集めました。オススメなどがあれば追加していきたいです。

更新日: 2013年08月12日

2025 お気に入り 143625 view
お気に入り追加

この記事は私がまとめました

fotiloさん

色と音楽ジャンルを選ぶことでアルバムジャケットを表示してくれます。
実際にその色でどのような使い方をしてるのか、または暇つぶしに使えます。
出典:http://colorhits.com/

フラットデザインに使える基本的な20色の色コードとかがコピペできます。多少明暗など変えて使うのにオススメです。
出典:http://flatuicolors.com/

色ごとに明暗の色・コードが見れるサイトです。メニューを作るなどでわずかな明暗で調整していきたいときに便利なサービスです。色の並び方はランダムで、更にランダムな色に飛ぶ機能があるので暇つぶしにも使えちゃいます。

自分だけのカラーテーマを作成して、公開、共有できるクラウドベースのアプリケーション サービスです。iphone版ではユニークな機能として、iPhoneカメラのレンズから入ってくるライブ画像を元に、カラーテーマを自動生成することができます。外出時、様々な景色からのインスピレーションでカラーテーマを作成、好みのカスタマイズを施し、名称やコメントを付けてその場で共有してみましょう:

いわゆる「HSV(色相・彩度・明度)」をいじりながら色の組み合わせを選択できるサービスです。キーとなる色にたいして自動的に表示してくれます。配色パターンを模索が楽しいサービスです。

キーとなる色にたいしてカラーパレットの作成ができます。画像からの色の抽出や共有などもできるためイメージを伝えたりするのが楽です。

ラーコードやカラースキームを簡単に作成できるツールです。
画面をクリックして複数の色を選択すると、カラーコードを生成しPNGやLESS形式に保存できます。動きがすごい。

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

色んなカテゴリから色の見本を選べる配色ツール。Web上のフルカラーで表現できる1600万色の色見本を見ることができます。参考サイトがすぐに見つかるのがありがたいです。

色から画像を探せるサービスです。ここにあがってくる画像は、Flickrにアップされてる「CreativeCommons」な画像です。便利。

出典mudcu.be

こちらも色を1つ選択すると簡単にカラーリングが作れるサービスです。AIやPhotoshop(.AOC)形式で保存ができます。

画像から色を抽出できるサービスです。自分で画像をアップロードするか、画像のURLを入力するとその画像の配色を表してくれます。

仮想ページをプレビューを見ながら、好きに配色を試すことができるジェネレータです。テーマカラーを1色選ぶと、それにあった配色を合わせてくれる便利なツールです。

出典2xup.org

こちらは有名かもしれませんが、日本の伝統色(2013年現在は465色)見本をRGB数値 (カラーコード) と合わせてリストで表示しているサイトです。

カラースキームを決められるサービスです。WEBページに落とし込んだ時の、配色のサンプルページなども見れてとても便利です。気に入った配色ができたら、Photoshopのカラーパレットや「HTML+CSS」や「XML」で書きだせます。

Chromeで使えるツールです。Webのカラーをスポイトで取得できるので、気に入ったサイトのカラーなどを真似したいときに利用できます。配色というより他サイトの配色を調べるツールですが便利なのであげておきます。

1