先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に色の組み合わせについて悩んでしまいました。

デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。絶望です。

そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。

▼目次

• ベースとなるカラーを設定したい
  • 1． 原色大辞典
  • 2． 配色の見本帳｜キーカラーで選ぶ配色パターン
• さまざまな色を探したい
  • 3． NIPPON COLORS
  • 4． paletton
• グラデーションを探したい
  • 5． 0 to 255
  • 6． uiGradients
• 配色パターンを考えたい
  • 7． HUE/360
  • 8． ウェブ配色ツール Ver2.0
• 他のサイトや雑誌の配色パターンを参考にしたい
  • 9． Color of Book
  • 10． Stylify Me
  • 11． Web Color Data
• 配色に役立つiPhone/Androidアプリ
  • 12. カラーガイド
  • 13. Saturation
  • 14. Color Picker - An Easy Tool For Colour Lovers
• ＋α（すごく分かりやすい配色講座）
  • 色彩センスのいらない配色講座
  • ノンデザイナーのための配色理論
  • 見やすいプレゼン資料の作り方 - リニューアル増量版
• まとめ

ベースとなるカラーを設定したい

1． 原色大辞典

http://www.colordic.org/

いつも参考にしている原色大辞典には、原色以外にも「和色大辞典」、「ビビットカラー」などがあり、大変役立ちます。また、色を選択してから明度と彩度を上げたり下げたり細かい調整も可能です。

「カラーピッカー」ではHEX・RGB・HSBに数値を入力し、ほしい色を探すこともできます。

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

http://ironodata.info/

色相の中から色をクリックすると、カラーコードや色に関する詳細な情報が確認できます。HEX・RGB・CMYKだけではなく、すごい量の組み合わせをアドバイスしてくれるので、見ているだけでも楽しいサイトです。こちらのサイトにも「色検索」というカラーピッカーがついています。

さまざまな色を探したい

3． NIPPON COLORS

http://nipponcolors.com/

日本の伝統色をHEX・CMYK・RGBで表示してくれます。和風の表現にしたいときは大変重宝します。

4． paletton

http://paletton.com/

パレット上でWebサイトを作ったときの色サンプルを確認できます。指定した色の仮想ページの表示や、HTML・CSS・LESS・XML・TEXTなどでの出力だけでなく、色覚障害の見え方、汚れたLEDディスプレイの見え方などを知ることもできます。カラーホイールの真ん中にある円を動かすとで、明度や彩度が調整が可能です。

 
詳細は以下の記事をご参照ください。

• カラーパレットを直感的に作ってページの見え方を確認できPNG・HTML出力もできる「Paletton」 – Gigazine
  http://gigazine.net/news/20140725-paletton/

グラデーションを探したい

5． 0 to 255

http://www.0to255.com/

指定した色の彩度を確認できます。「この色のもうちょっと薄いのが欲しい」という場面で活躍します。

6． uiGradients

http://uigradients.com/

通常の配色サイトでは、カラーコードの情報だけを得られることが多いですが、こちらはCSSなどの情報も表示してくれるので便利です。

配色パターンを考えたい

7． HUE/360

http://hue360.herokuapp.com/

色相環から、選択した色と相性のいい色を教えてくれるサイトです。配色で悩むことが多い方は、最初にこのサイトでチェックするといいかもしれません。

なお、詳しい使い方については過去の記事「Webデザインの配色で迷ったときに役立つツールとその使用方法まとめ」で紹介しているので参考にしてください。

8． ウェブ配色ツール Ver2.0

http://www.color-fortuna.com/color_scheme_genelator2/

Webサイトの配色の参考にとっても使えるサイトです。サイトの右側にあるカラーピッカーで色を選ぶと、その色に合った色を仮想のサイトページに自動で表示します。サイドバーや見出しもセットで反映されるので、完成したイメージを掴むのにもってこいですね。

他のサイトや雑誌の配色パターンを参考にしたい

9． Color of Book

http://colorchart.jp/

本や雑誌の配色が確認できるサイトです。Amazonで取り扱ってる書籍からの検索も可能です。

10． Stylify Me

http://stylifyme.com/

URLを打ち込むと「そのサイトの配色＋タイポグラフィの情報」を表示してくれます。表示された内容はPDFでダウンロードすることもできます。

11． Web Color Data

http://webcolourdata.com/

URLを打ち込むと「そのサイトの配色＋類似の配色がされたサイト」を表示してくれます。

配色に役立つiPhone/Androidアプリ

12. カラーガイド

iOSのDLはこちら。
AndroidのDLはこちら。

「DIC　カラーガイド」のアプリ版です。イメージに近い色を探すだけでなく、撮影した写真やライブラリのなかに入っている写真から色のコードを探せます。

13. Saturation

iOSのDLはこちら。

最初から、様々な色を組み合わせたパターンが登録されています。登録された色のカラーコードなどの情報を閲覧してお気に入りに入れることも可能です。

14. Color Picker – An Easy Tool For Colour Lovers

iOSのDLはこちら。

配色のアプリと少し違いますが、気になる色の情報を調べられるカラーピッカー系アプリです。他に、自分で作った色の情報を知ることのできる機能があります。

＋α（すごく分かりやすい配色講座）

最後に＋αとして、配色について学びたいときに参考になるスライドを3つ紹介させていただきます。

色彩センスのいらない配色講座

色彩センスのいらない配色講座 from Mariko Yamaguchi

ノンデザイナーのための配色理論

ノンデザイナーのための配色理論 from tsukasa obara

見やすいプレゼン資料の作り方 – リニューアル増量版

見やすいプレゼン資料の作り方 – リニューアル増量版 from TUAT / SKET
（配色についての説明はP.48からです）

まとめ

私は一度悩んでしまうとなかなか抜け出せないタイプの人間なので、こういうサイトの存在に助けられています。
開発者の皆さま、本当にありがとうございます。

また、以下の記事も参考になるかと思われますので、ぜひご覧ください。

WEBデザインの配色で迷ったときに役立つツールとその使用方法まとめ 
新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップ

ではでは、失礼します。

【デザイン初心者にオススメしたい記事はこちら】

WEBデザインの配色で迷ったときに役立つツールとその使用方法まとめ

ノンデザイナーのための無料ビジュアルコンテンツ作成ツール9選

ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事

デザイナーを目指す人必見！デザインのはじめかた〜8つの心構え〜

はじめてのschoo！「Webデザインの基礎と実習」を受けてみた！