配色に悩んだ時に役立つ便利なサイトやカラー関連ツールまとめ

配色に悩んだ時に役立つ便利なサイトやカラー関連ツールまとめ

「いつも同じような感じになってしまう」「このキーカラーに対してどんなアクセントカラーが合うのか」といったデザイン(配色)時の悩みを手助けしてくれるものやインスピレーションをもらえるもの、オリジナルのカラーパレットを簡単に作成・出力できるなど、配色・カラーに関連する便利なサイトやツールのまとめです。似たようなサイトも多いですが、使いやすさ・見やすさ・情報量などの点でそれぞれ違いがあるので、こういったツールをお探しの方はひと通り試して自分に合ったものを見つけてみてください。

2014年12月22日 追記
「Material Design Color Palette Generator – Material Palette」 「Material UI | Material UI Colors」 「flatuicolorpicker : Best Flat Colors For UI Design」を追記しました。

iOS 8 colors

iOS 8 colors

iOS 8風のグラデーションカラーを一覧化しているサイトで、マウスオンすればカラーコードを確認できます。

uiGradients – Beautiful coloured gradients

uiGradients - Beautiful coloured gradients

美しいグラデーションカラーがまとめられており、使用されているカラーコードだけでなくCSSで表示させるためのコードも確認できます。

Flat UI Colors

Flat UI Colors

フラットデザインにピッタリなカラーがまとめられており、各カラーをクリックすることでカラーコードなどをコピーできます。
コピー形式はHEX(2種類)・RGB・RGBAの全4種類から選べます。

Color Trends + Palettes :: COLOURlovers

Color Trends + Palettes :: COLOURlovers

カラーパレットを作成するだけでなく共有などもできるコミュニティサイトで、世界中から様々なカラーパレットが投稿されています。
詳細ページではそのパレットに使用されている各カラーのHEXやRGBが確認できます。
適当に眺めるだけでなく「この人の配色好きかも…」というのがあれば、ユーザーページから新たなカラーパレットを見つけるといった使い方もできます。

PLTTS

PLTTS

カラーパレットが一覧化されているサイト(COLOURlovers関連)で、余計な情報もほとんどないのでシンプルで見やすいです。

BrandColors

BrandColors

有名なサイトやサービスのカラーを一覧化しているサイト。

Stylify Me – Online Style Guide Generator

Stylify Me - Online Style Guide Generator

指定したサイトの配色やタイポグラフィを一覧化してくれるしてくれるサイトで、タイポグラフィではフォントの種類やサイズなども表示してくれます。
他にも表示されている画像サイズを表示してくれたり、表示された内容をPDFでダウンロードすることもできます。
「配色が素敵だなー」と思うサイトがあった場合に使ってみると、色の組み合わせ方などわかりやすくて良いです。

Colours

Colours

こちらも指定したサイトの配色を一覧化してくれるサイトで、詳細ページでは似たような配色のサイトの情報も掲載されています。

Coolors – The super fast color palettes generator!

Coolors - The super fast color palettes generator!

ランダムでカラーパレットを作成してくれるツールで、スペースを押すと次々にカラーが切り替わっていきます。
表示されているカラーは一部を固定(カラーをクリック)にしたり、カラーコード部分を編集して任意でカラーを指定することもできます。

color.hailpixel.com · Swatch you doing?

color.hailpixel.com · Swatch you doing?

直感的にカラーパレットを作れるツールで、マウスを動かしていくとカラーが変わっていき、クリックでそのカラーを保存することができます。
カラーはHEXだけでなく、画面下にある歯車を選択すればRGBとHSLの値も確認できます。

colourcode – find your colour scheme

colourcode - find your colour scheme

操作方法など先程の「color.hailpixel.com」とほとんど同じで、こちらも直感的にカラーパレットを作れます。
配色パターンを設定したり、CSSやPNGなどでフォーマットでダウンロードしたりもできます。

CSS Color Chart

CSS Color Chart

カラーが系統別に分類・一覧化されており、カラーをクリックすると使用するために必要な値をコピーできます。
コピーされる内容は、右上の方に表示されているColor Name・HEX・RGBの3項目の中から選択できます。

Adobe Color CC

Adobe Color CC

元々は「Adobe Kuler」というAdobe製のツールで、ご存知の方も多いと思います。
作成したものはPhotoshopやIllustratorとで使用するのはもちろん、コメントやタグ付けをしたり、他のユーザーと共有することもできます。

Paletton – The Color Scheme Designer

Paletton - The Color Scheme Designer

「Adobe Color CC」と同様にこちらも有名なのでご存知の方も多いと思うツールのひとつ。
配色パターンを選択する機能や作成したカラーパレットがWebサイトでどのように見えるか表示する機能、他にもCSSやXMLで書き出す機能などもついています。

HUE/360 The Color Scheme Application

HUE/360 The Color Scheme Application

キーカラーを選択することで、それに合ったカラーを表示してくれます。

0to255

0to255

カラーを選択すると明度を調整したカラーを一覧化して表示してくれるので、グラデーションやマウスオン時に変更するカラーなどを選びたい時に非常に便利です。
カラー選択は任意でカラーコードを指定するのはもちろん、ランダムで表示してくれる機能もあります。

WEB色見本 原色大辞典 – HTML Color Names

WEB色見本 原色大辞典 - HTML Color Names

様々なカラーが一覧化されているサイトで、リンク先は「原色」の一覧になりますが、その他にも「和色」「パステルカラー」「メトロカラー(地下鉄のシンボルカラー)」などのカラー一覧もあります。
一覧ページではカラー名とHEX値が表示されているだけですが、各カラーをクリックすることで詳細を確認することでき、RGBやCMYKの値などが掲載されています。

NIPPON COLORS – 日本の伝統色

NIPPON COLORS - 日本の伝統色

日本の伝統色を一覧化したサイトで、表示されたカラーはHEX・CMYK・RGBでそれぞれ値を確認できます。

和の色 – 色の名前と色見本

和の色 - 色の名前と色見本

同じく日本の伝統色を一覧化したサイトで、それぞれ色名とHEX・RGBでの値が掲載されています。

Color of Book

Color of Book

本や雑誌の表紙で使用しているカラーを一覧化してくれるサイトで、サイト内の検索機能で探す以外にも、Amazonにある本のタイトル検索もできます。
また、表示されたカラー一覧はPhotoshop用カラーパレットとしてダウンロードすることもできます。

配色の見本帳 | キーカラーで選ぶ配色パターン

配色の見本帳 | キーカラーで選ぶ配色パターン

ベースとなるカラーを選ぶと、そのカラーについて様々な情報が表示されます。
HEX・RGB・CMYKといったカラーコードはもちろん、彩度・明度・色相環角度による配色、アクセント・ワンポイントカラー情報なども表示されます。

色見本と配色サイト – color-sample.com

色見本と配色サイト - color-sample.com

任意のカラー情報を見ることはもちろん、トーン別や明度別のように豊富に用意されたカテゴリーで様々なカラーや配色を確認できます。
また、他のユーザーが作成・投稿した配色を見たり、各キーカラーを使用した参考サイト一覧などもあります。

Hexu.al | Browser for words that make hex codes.

Hexu.al | Browser for words that make hex codes.

カラーコードを意味のある単語を使って表現したサイト。
上から眺めていくだけでなく、ヘッダーやフッターに表示されているストライプ部分を選択して各カラーに移動することもできます。

BADA55.io – CSS hex color words for web developers

BADA55.io - CSS hex color words for web developers

「Hexu.al」と同様、こちらもカラーコードを単語で表現したサイト。

Contrast Ratio

Contrast Ratio

これまで紹介してきたものとは違いますが、こちらは背景とテキストのカラーをそれぞれ指定して、その組み合わせの可読性チェックを行うことができます。

Material Design Color Palette Generator – Material Palette

Material Design Color Palette Generator - Material Palette

並んでいるカラーの中から2色選ぶとマテリアルデザインのカラーパレットを作成してくれます。
作成されたパレットはダウンロードすることができ、CSS・SASS・SVG・XML・PNGの形式が用意されています。

Material UI | Material UI Colors

Material UI | Material UI Colors

マテリアルデザイン向けカラーがまとめられており、各カラーをクリックすることでカラーコードなどをコピーできます。
コピー形式はHEX(2種類)・RGB・RGBAの全4種類から選ぶことができ、スウォッチも用意されています。

flatuicolorpicker : Best Flat Colors For UI Design

flatuicolorpicker : Best Flat Colors For UI Design

マテリアルデザイン向けカラーがまとめられており、各カラーのHEXやRGBが記載されています。
また、右上にあるナビを使って表示するカラー系統を絞ることができます。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。