デザインの知識がなくても参考になる配色パターン見本サイト+アプリ14選

まゆこ


デザインの知識がなくても参考になる配色パターン見本サイト+アプリ14選
(編集部注*2014年12月15日に公開された記事を再編集したものです。)

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

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

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

▼目次

  • ベースとなるカラーを設定したい
    • 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. 原色大辞典

原色大辞典

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

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

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

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

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

さまざまな色を探したい

3. NIPPON COLORS

日本の伝統色

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

4. paletton

paletton

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

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

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

5. 0 to 255

0to255

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

6. uiGradients

uiGradients - 美しい色のグラデーション

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

配色パターンを考えたい

7. HUE/360

HUE:360

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

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

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

ウェブ配色ツール

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

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

9. Color of Book

ColorofBook

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

10. Stylify Me

Stylify Me

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

11. Web Color Data

WebColorData

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

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

12. カラーガイド

IMG_5701

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

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

13. Saturation

IMG_5708

iOSのDLはこちら

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

14. Color Picker – An Easy Tool For Colour Lovers

IMG_5704

iOSのDLはこちら

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

+α(すごく分かりやすい配色講座)

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

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


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

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


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

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


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

まとめ

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

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

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

ではでは、失礼します。

 

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

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

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

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

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

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

まゆこ
この記事を書いた人
まゆこ

エディター

関連記事

こちらもおすすめ

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック

  • 著者伊達千代
  • 価格¥ 2,700(2015/11/06 17:36時点)
  • 出版日2014/09/24
  • 商品ランキング85,455位
  • 単行本160ページ
  • ISBN-104844364529
  • ISBN-139784844364528
  • 出版社エムディエヌコーポレーション