配色決めに役立つカラーツール(配色見本サービス・カラーパレットツール)

スポンサーリンク
flower-pc

こんにちは、美大卒・元アパレル店員の
ゆっきー(@elcielo_design)です。

今回はデザイン・イラスト等の色選びで、
役立つ配色見本サービスをまとめました。
(基本的に無料オンラインツールです。)

新しいカラーツールを見つけた追加、
サービスが終了したツールは削除して
随時この記事は更新してるものです。

この記事の目次

配色見本ツールを利用していこう。

デザインだと特にWebやポスターの配色
イラストならキャラのメインカラーなど
デザインやイラストに長けている人でも
配色は悩む要素が多い部分だと思います。

初心者の方なら尚更、良い配色を作るのは
難しいことではないでしょうか。

配色1つで、そのデザインやイラストの
イメージも全く違うものにもなりますよね。

ですが、今回紹介する配色見本サービスで
そんな悩みはきっと解消されるでしょう。

どのサービスも非常に便利なものなので、
自分に相応しいサービスを是非見つけて
デザイン制作などに利用して見て下さい。

関連記事

books 1825557  34 100x100 - 配色決めに役立つカラーツール(配色見本サービス・カラーパレットツール)

スポンサーリンク

カラーツールの一覧まとめ
(配色見本・カラーパレット)

「カラーツールの一覧まとめ」

 ジャンル  カラーツール数 (78)
 ① 普段使い可能な便利系  10
 ② AI (人工知能)・ワンクリック系  9
 ③ Webデザイン・UIデザイン関連  9
 ④ マテリアルデザイン系  5
 ⑤ 画像 (写真) から抽出・分析系  4
 ⑥ インスピレーション系  10
 ⑦ グラデーション関連  23
 ⑧ 知識系  3
 ⑨ データベース系  2
 ⑩ その他  3

探しているカラーが簡単に見つかったり
色の組み合わせの見本になったりする
Webサービス (ツール) 一覧になります。

① 普段使い可能な便利なカラーツール

「普段使い可能な便利なカラーツール」

 ジャンル  カラーツール名
 ① 普段使い可能な便利系
 
 Adobe Color
 SCHEMECOLOR
 ColorDrop
 ColorKitty
 Pigment
 Color Supply
 HUE/360
 NIPPON COLORS
 Canvas Colors
 Sphere:
Color Theory Visualizer

配色選びに迷った際にまず始めに
参考にしている便利なカラーツール。

様々なニーズに対応できると思います。

Adobe Color

adobe-color

Adobe Colorは、Adobe社が提供する
あまり知られていない配色ツールです。

色の知識がなくてもバランスの取れた
色の組み合わせを簡単に実現できます。

 特徴 ・カラーハーモニー(色同士の関係性)から、
 優れた配色パターンを生成できる。
・中央にある丸いカラーピッカーの操作で
 色相や明度を変えることが可能。
・インターフェイスもシンプルで日本語対応
・他のデザイナーが作成した便利な
カラーギャラリー」等も備わっている。
・アップル製品(iPhone・iPadなど) で
 撮った写真素材からカラーパレット作成、
 Adobeサービスと連結して使える。
 その他 ・カラーハーモーの切り替えの種類
「類似」「モノクロマティック」「補色」
「トライアイド」「コンパウンド」
「シェード」「カスタム」

Adobe Color

Create color schemes with the color wheel or browse thousands of color combinations from the Color community.

SCHEMECOLOR

schemecolor

SCHEMECOLORは、1万種類以上の
カラースキームがストックされている
Webサイトの1つになります。

 特徴 ・4〜6色の配色パターン見本サイト
・1万種類以上の豊富なカラーパターン
・配色の編集やダウンロード可能。
 その他  

SCHEMECOLOR

SchemeColor.com is a top-rated website to download, create and share thousands of beautiful color combinations. Get detailed information on hexadecimal colors c

ColorDrop

colordrop

ColorDropは、グリット上に
4色の配色の組み合わせが並ぶ
配色見本のサイトの1つです。

 特徴 ・4色の配色パターン見本サイト
・フラットデザインを作りやすいパレット
・16進数/RGBコードでカラーをコピー可。
・ソートやフィルタリング等の機能も多数。
・画面上部のプルダウンで人気順に変わる。
・画面上部の右の筆のアイコンを押すと、
 ダークモードや背景の変更ができる。
 その他  

ColorDrop

Thousands of curated colors, palettes for use in your products

ColorKitty

colorkitty

ColorKittyは、画像をアップロードすると
その画像に含まれる色を自動で抽出して、
カラーパレットを表示してくれるツール。

 特徴 ・画像からカラーを抽出するツール。
・選択された配色は画像上でドラック移動で
 色を変更することができる。
 その他  

ColorKitty

Easily extract perfect color palettes from amazing pictures using our color picker.

Pigment

pigment

Pigmentは、Pigment (顔料) と
Lighting (光量) を調整しながら、
使いやすいナチュラルな配色を探せる
便利で珍しいカラーツールになります。

 特徴 ・2色の配色パターン見本サイト
・右上の検索ボックスから画像をベースに
 配色を見つけることも可能。
・DPT紙のデザインでもかなり重宝
 その他  

Pigment

A unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math. Find a beautiful, free color palette in seconds to kick off yo

Color Supply

color-supply

Color Supplyは、カラーチャートを回し
好きな配色を探せる便利なツールです。

 特徴 ・2〜4色の配色パターン見本サイト
・類似色やトライアドなどの色相環から、
 優れた色の組み合わせを見つけられる。
・ポップで使い勝手の良いカラーツール
・アイコンイラストやグラデーションでも
 色をすぐに確認できるのが良い。
・3色の配色を探せる数少ないツールの1つ
 その他  

Color Supply

Use the color wheel to select a style you like. Then pick a hex code.

HUE/360

hue/360

HUE/360は、
「Brightness」で色の明るさを選択し
 使いたい色を色環からクリックすると、
 選べる色の数が減り相性のいい色だけ
 残っていくという便利なカラーツール。

 特徴 ・1つのキーカラーと調和する
 カラーを選んでくれるツール。
・ページ下で選択した色のHEX値まとめと
「Print User Color」でコードが見れる。
 その他  

HUE/360

NIPPON COLORS

nippon-colors

NIPPON COLORSは、
日本の伝統色を扱う代表的なサイト。

和風のデザインを作るときには、
是非参考にしたいサイトですね。

 特徴 ・見やすいスッキリしたカラーチャートと
 美しいアニメーションが魅力的なツール。
・日本の伝統色 (日本での色の呼び方) の
「名称」「CMYK /RGB」を確認可能。
・微妙な色の違いが名前で表現されている。
・右の「MUNSELL」を「ON」にすると
3Dになるという遊び心あるデザイン。
 その他 ※ 3Dは「Safari」「Chrome」しか
 見れないので注意が必要になる。

NIPPON COLORS

The Traditional Colors of Nippon (Japan). This site is optimized to Webkit.

Canva Colors

canva-colors

Colorsは、Canvaが提供している
カラーツールをまとめたページ。

 特徴 ・「Color palette generator」では、
 アップロードした写真から配色を抽出可能。
 (アップロードもドラッグ&ドロップで簡単)
・「Color palette ideas」では、
  約4000の4色の配色パターンを見れる。
・「Color wheel」では、
 色環(カラーホイール)で色の理論を学べる。
・「Color meanings」では、
 参考になる色の検索・意味などを調べれる。
 その他  

Canva Colors

Generate the perfect color palette and learn about color meanings with Canva's collection of colors and free color tools.

関連記事

Sphere : Color Theory Visualizer

color-theory-visualizer

Sphere: Color Theory Visualizerは、
1つのカラーを選択することによって
簡単にカラーリングを表示できるサイト。

 特徴 ・ワンクリックで配色を見つけれるサイト
・パターンも沢山の選択できて
「Harmony」「Vision」「Quantize」を
 変更して様々なカラーリングが可能。
・「Adobe Color」と同じようなツール
 その他  

Sphere : Color Theory Visualizer

Harmonize colors. Create color schemes. Find HEX codes. Simulate color-blindness. Export into Illustrator, Photoshop and ColRD.com

② AI (人工知能)・ワンクリック系
カラーツール

「AI (人工知能)・ワンクリック系カラーツール」

 ジャンル  カラーツール名
 ② AI・ワンクリック系  Colormind
 Cohensive Colors
 Khroma
 Palettable
 Colourcode
 Coolors
 Colordot
 Color Hunt
 C&F (Colors & Fonts)

AI (人工知能)を利用した配色サービス、
クリックだけで簡単に使えるツール等。

特に、色のアイデアがないときには、
重宝できるカラーツールになります。

Colormind

colormind

Colormindは、ワンクリックで
配色パレットをランダム表示するサイト。

 特徴 ・5色の配色パターン見本サイト
・ディープラーニングを利用して、
 最適な色の組み合わせを表示してくれる。
 (利用する日毎に違う結果が出る。)
・「Generate」をクリックすることで
「 Flowers」「Portrait Photography」
「Star light」「The Fall」に
 そのイメージ合った配色を生成する。
・ランダムだけでなく色指定も可能。
・画像のアップロードに対応。
・背景が黒色なので少し分かりにくい?
 その他  

Colormind

Generate color combinations in one click. Colormind creates cohesive color schemes using a deep neural net.

Cohensive Colors

cohesive-colors

Cohensive Colorsは、
ボタンのクリックだけで統一感ある
配色を表示してくれるカラーツール。

 特徴 ・簡単に使えるカラーツール
・色数を増やしたり減らしたり
 特定色でオーバーレイをかけたりできる。
 その他  

Cohensive Colors

A tool for creating more cohesive color schemes. Pick a bunch of random colors that you like and add a touch of magic.

Khroma

khroma

Khromaは、デザイナーのための
AI カラーツールの1つになります。

 特徴 ・好きな色を決めることで人工知能が、
 それに相応しい配色を提案するツール。
・テキストと背景、2色の組み合わせ、
 グラデーション、写真、カラーパレット等
 様々なアイデアが表示される。
・はじめに好きな色を50決める必要がある。
 その他  ※ モバイルには現在対応していない。

Khroma

Khroma is the fastest way to generate, discover, search, and save color combos and palettes you'll want to use.

Palettable

palettable

Palettableは、
カラーを好きか嫌いかで判断して
自分の直感で配色を探せるサイト。

 特徴 ・何百万人のデザイナーの配色の知識が
 詰め込まれたツール (ジェネレーター)
・操作が分かり易く感覚的に配色を選べる。
・「Dislike」か「Like」の2つの選択で、
 配色を順番に決めていく形になる。
 その他  

Palettable

Colourcode

colourcode

Colourcodeは、
カラーコード・スキームを手早く
ワンクリックで決めれるツール。

 特徴 ・感覚的に色を選べるツール。
・画面でマウスを動かすと色が変化し、
 クリックで色を確定することができる。
・右にあるプラスボタンで色の追加
・SassやLESS、PNGファイルなどでも
 ダウンロード可能になっている。
 その他  

Colourcode

colourco.de is an online designer tool, which allows you to easily and intuitively combine colours.

Coolors

coolors

Coolorsは、スペースキーを押すごとに
5つの色のカラーパレット(パターン)を
自動的に表示してくれるツールです。

 特徴 ・5色の配色パターン見本サイト
・50万以上のカラーペレットの例
・1色ずつ色の調整、好みの色はLockして、
  他の4色を変更することができる。
・メニューの「Explore」に切り替えると、
 ユーザーが作成したパレットを閲覧可能。
・ログインでオリジナルパレットの保存、
 iOS/AndroidアプリやAdobeツールとの
 連携もできるカラーツール
 その他 ・Chrome拡張機能のダウンロードをすると
 表示ページの中からカラーの抽出ができて
 そのページ上でカラーパレットを作れる。

Coolors

coolors

Colordot

colordot

Colordotは、
開いたページ上でマウスを動かすだけで
画面の色が変化して色を選べるツール。

 特徴 ・マウスを動かすと画面の色が変化
 (マウスを左右に移動させると色相、
 上下に移動させると彩度と明度が変化する)
・カラーコードをクリックするたびに
 色が保存されていき、右に新たな色を
 どんどん追加できていけるので便利。
・PC表示で大きな画面で色の確認が可能。
 その他  

Colordot

Simple color picker everyone

Color Hunt

color-hunt

Color Huntは、一般ユーザーが
配色パレットを投稿できるサイト。

 特徴 ・4色の配色パターン見本サイト
・シンプルで使い易く、配色の種類は豊富
・世界中のユーザー投稿型の配色パレット
・人気順で選ぶこともできるので、
 理論でなく一般の人がどんな配色を
 好んでいるのかなどもわかる。
・画面上部のプルダウンで人気順に変更可能
 その他  

Color Hunt

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes

C&F (Colors & Fonts)

colors-and-fonts

C&F (Colors & Fonts)は、
総合的なカラーツールの1つ。

 特徴 ・5色の配色パターン見本サイト
・綺麗なグラデーションや文字の組合わせ、
 マテリアルデザインのパレットもある。
 その他  

C&F (Colors & Fonts)

Colorsandfonts.com is a extremely curated group of css color gradients, css color palettes and google font pairings for digital designers and web developers

③ Webデザイン・UIデザイン関連
カラーツール

「Web・UIデザイン関連カラーツール」

 ジャンル  カラーツール名
 ③ Web・UIデザイン関連  FLAT UI COLORS 2
 PALX
 Hello Color
 Paletton
 Colorable
 Color Library
 ColorHexa
 LOL Colors
 Color Designer

WebデザインやUIデザイン制作の際、
比較的使うことが多いカラーツール。

色をCSS・Sassファイルで使える機能や
色のコントラストを確かめれるツール、
HEX値をRGB/CMYKに変更できるもの等
更に使いやすさを追求できる配色が可能。

FLAT UI COLORS 2

flat-ui-colors-2

FLAT UI COLORS 2は、
フラットなUIデザインなどのための
カラーパレットを一覧にしたサイト。

 特徴 ・UIデザインのカラーの勉強で役立つ。
・各色をクリックすることによって、
 Web制作に役立つHEX、RGB、RGBAを
 コピーすることができる。
 その他  

FLAT UI COLORS 2

PALX

palx

PALXは、ベースとする色を決めると
カラーパレットを作ってくれるツール。

 特徴 ・便利な配色カラーツール。
・作成された調和のとれた全配色は、
 CSSやSass、JSON等でも使える。
 その他  

PALX

Automatic UI Color Palette Generator

Hello Color

hello-color

Hello Colorは、
クリックして出る2色を決めることで
類似色・補色を表示してくれるサイト。

 特徴 ・2色の配色パターン見本サイト
・スペースキーを押すと類似色・補色
 一覧を見れるシンプルなデザイン
・色の表示画面が全体的に大きいので、
 イメージが直感的にしやすい。
 その他  

Hello Color

Paletton

paletton.com

Palettonは、カラースキームを
自動で選んでくれるツールの1つ。

 特徴 ・配色設計を助けてくれるカラースキーム
・ベースのカラーを選択するとそれに対して
 補色、同類色、トライアド、テトラード等
 相性の良いカラーを表示してくれる。
・「EXAMPLE」をクリックすることで、
 カラーコードを合わせたサンプルの
 サイトが見れイメージがしやすい。
・「Adobe Colors」のように1色決めれば、
 他の色を決めやすい。
 その他  

Paletton

In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color

Colorable

colorable

Colorableは、配色のコントラストを
確認するのに便利なカラーツール。

 特徴 ・便利な配色ツールの1つ。
・文字の微妙な色合いのチェックに役立つ。
・文字テキストの配色の最終確認に使える。
 その他  

Colorable

Color contrast tester

Color Library

color-library

Color Libraryは、
印刷で使用される「CMYK」では
表せないスポットカラーを選んで、
色を確認可能なデータベースサイト。

 特徴 ・スポットカラーを選択し色を確認できる
 カラープロファイル用データベースサイト
・予め用意された画像をカラーをしぼって
 表示することが可能。
 その他  

Color Library

Color Library – Convert color images in multi-channel for printing devices

ColorHexa

colorhexa

ColorHexaは、色名を検索にかけると、
そのカラー情報・説明を表示するサイト。

 特徴 ・カラー情報が載っている世界最大規模の
 検索サービス(カラー百科事典)
・かなり細かい色の情報や説明を見れる。
・RGB、CMYK、HSL、HSVなどの
 様々な数値も出してくれるので便利。
 その他  

ColorHexa

Color hex encyclopedia providing information about any color.

LOL Colors

lol-colors

LOL Colorsは、
Webデザイン参考用に現役デザイナーが
集めた綺麗な配色パレットの一覧サイト。

 特徴 ・4色の配色パターン見本サイト
・Webデザインのための配色パレット
・涙のような配色パレットが可愛い。
・お気に入り登録数で配色パターンの
 人気を確認できる。
・クリックでHEX値のコピーが可能。
 その他  

LOL Colors

Color Designer

color-designer

Color Designerは、好みの色を選ぶと
その純色に白・黒それぞれを混ぜた色を
段階的に表示してくれるカラーツール。

 特徴 ・デザイナーのためのカラーツール
・Tints (純色に白を混ぜた色) と
 Shades (純色に黒を混ぜた色)を表示できる。
 その他  

Color Designer

The main purpose of this tool is to help with building a color palette and generate tints and shades based on it. Just pick a color, and the app does the rest.

④ マテリアルデザイン系カラーツール

「マテリアルデザイン系カラーツール」

 ジャンル  カラーツール名
 ④ マテリアルデザイン系  Random Material
Palette Generator
 Material Design Colors
 Colors – Material-UI
 Material Mixer
 Material Design Palette

Googleのマテリアルデザインで
採用されている配色を用いたツール。

ランダムに色を表示してくれたり、
UIデザイン等で利用しやすい色も
すぐに分かったりと何かと便利です。

それにHEX値をコピー&ペーストで、
簡単にマテリアルカラーを利用可能。

Random Material Palette Generator

random-material-palette-generator

Random Material Palette Generatorは、
クリックするだけでマテリアル(素材)から
自動でカラーを選んでくれるツール。

 特徴 ・3色の配色パターン見本サイト
・ランダムでカラーを決めれる。
・ワンクリックする度に下に配色を保存。
・5つのテンプレートに切り替え可能。
 その他 ・5つのテンプレート
「Text template」「Card template」
「Vertical template」「Circular template」
「Logo Threebu template」

Random Material Palette Generator

Your material palette just with a click! #RandomMaterialPalette

Material Design Colors

material-design-colors

Material Design Colorsは、
Googleデザインガイドの
「マテリアルデザイン」の色をまとめて
閲覧できるカラーパレットサイトの1つ。

 特徴 ・マテリアルデザインのカラー参考サイト
・メインカラーとアクセントを一度に
 確認できるのでデザイン作成にも便利。
 その他  

Material Design Colors

Out of color ideas? Material Design Color Palette will help you quickly decide which color to choose for your project. Colors are taken from Google's Material D

Colors – Material-UI

colors-material-ui

Colors – Material-UIも、
Googleデザインガイドの
「マテリアルデザイン」の色一覧を
見ることができるサイトになります。

 特徴 ・マテリアルデザインのカラー参考サイト
・「Material Design Colors」と似ている。
・カラー名とカラーコードを一緒に見れる。
 その他  

Colors – Material-UI

React components for faster and easier web development. Build your own design system, or start with Material Design.

Material Mixer

material-mixer

Material Mixerは、
Googleのマテリアルデザインの配色を基に
自動で類似色の配色を示してくれるツール。

 特徴 ・マテリアルデザインの配色見本サイト
・「Colors – Material-UI 」と
 合わせて覚えておきたいツール。
 その他  

Material Mixer

Material mixer tool, allows you to mix match primary and secondary color of material design color palette.

Material Design Palette

material-design-palette

Material Design Paletteは、
その名の通りマテリアルデザインに
特化しているカラーパレットの1つ。

 特徴 ・マテリアルデザインの配色見本サイト
・2色選択するとそれに合った6色が表示され
 8色の調和したカラーパレットができる。
・カラーパレットとは別に多くの
 SVGアイコンをダウンロードが可能。 
 その他  

Material Design Palette

Choose your favorite colors and get your Material Design palette generated and downloadable.

⑤ 画像 (写真) から抽出・分析系
カラーツール

「画像 (写真) から抽出・分析系カラーツール」

 ジャンル  カラーツール名
 ⑤ 画像から抽出・分析系  PHOTOCOPA
 Color Palette Generator
 Palette Creator
 MulticolorEngine

好きな画像をアップロードすることで
それに用いられている色自動で抽出し、
配色パレットを作成してくれるツール。

デザインやイラストなどのイメージや
コンセプトがある程度固まっている際に
利用すると便利なものばかりになります。

PHOTOCOPA

photocopa

PHOTOCOPAは、COLOURLoversの
アップロードした画像 (写真) を
自動で分析して使われている色を
配色パレットに表示するツール。

 特徴 ・カラー抽出系のツール
・デザインやイラストのイメージがある際
 その配色で使われている色が分かる。
 その他  

PHOTOCOPA

PHOTOCOPA helps you find color inspiration in photographs. Sampled colors and 6 great palette suggestions help you make a great photo inspired color palette.

Color Palette Generator

color-palette-generator

 Color Palette Generatorは、
イメージ画像をアップロードすることで
それに合ったマルチカラーパレットを
生成してくれるツールの1つになります。

 特徴 ・カラー抽出系のツール
・デザインのイメージがある場合便利。
 その他  

 Color Palette Generator

Color schemes from any image.

Palette Creator 

palette-creator

Palette Creatorは、
Google Chromeの拡張機能の1つで、
ページに表示している画像やイメージの
配色パレットを作ってくれる便利ツール。

 特徴 ・Google chromeの拡張機能
・ページに表示しているイメージ画像から
 配色パレットを生成できる。
 その他  

Palette Creator

Creates a color palette from any image. Just right-click on the image and select the “Palette Creator” option.

MulticolorEngine

multicolorengine

MulticolorEngineは、
好みの色から複数の画像 (写真) を
探すことができるサイトになります。

 特徴 ・指定した配色比率からその割合と同じ
 色を含む画像を一覧表示してくれるサイト。
 その他  

MulticolorEngine

TinEye is a reverse image search engine. Search by image: Give it an image and it will tell you where the image appears on the web.

⑥ インスピレーション系
カラーツール

「インスピレーション系カラーツール」

 ジャンル  カラーツール名
 ⑥ インスピレーション系  Color Lisa
 BrandColors
 Color Leap
 Hues
 COLORWISE
 COOL COLORS
 BADA55
 Color of Book
 Ear Palettes
 Found color

サイトのページを見ているだけでも、
デザインの配色アイデアが出てきそうな
インスピレーション系のカラーツール。

世界の偉大な画家が作品に用いた配色、
海外で有名な企業のブランドのカラー、
NBA・MLBのスポーツチームのカラー等の
様々なユニークな面白いものを紹介します。

関連記事

Color Lisa

color-lisa

Color Lisaは、
世界の有名画家・アーティストの作品を基に
配色パレットがまとめられた珍しいサイト。

 特徴 ・世界の偉大なアーティストの作品を
 モチーフにした配色見本サイト。
・ピカソ、ダリ、ダビンチ、モネなど
 日本で認知されるアーティスト作品も多数。
 その他  

Color Lisa

Color Lisa is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed de

BrandColors

brandcolors

BrandColorsは、
海外の有名な企業やスタートアップで、
使われているブランデイングカラーを
アルファベット順に並べたサイトです。

 特徴 ・ブランデイングカラーの参考になるサイト
・カラーをコピーやダウンロードも可能。
・ダウンロードはCSS、SCSS、ASE、LESS
 スタイルでできる。
 その他  

BrandColors

The biggest collection of official brand color codes around. Includes hex colors codes for 500+ brands including Facebook, Twitter, Instagram, and many more.

Color Leap

color-leap

Color Leapは、歴史的な有名絵画や
ポスター、美術品等で用いられた配色を
時代ごとにタイムラインで見れるサイト。

 特徴 ・歴史的なもので使われた色を
 閲覧できるプロジェクト。
・ストックされるカラー数はそこまでないが
 ロマンチックな雰囲気のあるサイト。
 その他  

Color Leap

Search through 180 Color Palettes used throughout the last 4000 years.

Hues

hues

Huesは、世界的プロスポーツチームの
ロゴカラーをまとめた配色のサイト。

 特徴 ・スポーツロゴの配色見本サイト
・シンプルで分かりやすい。
・NFL、NBA、MLB、EPLに所属する
 各チームごとのブランドカラーを閲覧可能
 その他  

Hues

COLORWISE

colorwis

COLORWISEは、Product Hunt
登場したアイテムの配色をまとめた
カラーストックサイトになります。

 特徴 ・Webツールやモバイルアプリ等の
 最新テクノロジー関連のプロダクトで
 扱われたアイテムの配色を確認できる。
 その他  

COLORWISE

Search through the most voted products on Product Hunt.

COOL COLORS 配色パターン見本40選

saruwaka-cool-colors

COOL COLORSは、サルワカ提供の
配色の見本が40選見れるツール。

 特徴 ・サルワカによる配色パターン見本ツール
 (ベストな色の組み合わせを探せるツール)
・カテゴリー別に、アプリデザイン作りに
 役に立つ配色パレットが見れる。
・6つのカテゴリー分けによって、
 実際に使用した時のイメージが湧きやすい。
・日本語サービスなので使い勝手も良い。
 その他 ・6つのカテゴリー
 「万人受けする配色」
「親近感を感じさせる配色」
「個性的な配色」
「クール系の配色パターン」
「元気・アクティブ系の配色パターン」
「かわいい系の配色パターン」

COOL COLORS 配色パターン見本40選

コピペで使えるオシャレな色の組み合わせを紹介します。それぞれの配色の実際の使用例まで用意しました。

BADA55

bada55-io

BADA55は、
数字とアルファベットで表せる
英単語カラーをまとめたサイト。

 特徴 ・ユニークな配色サイト
・変わった配色にしたいならおすすめ
 その他 ・サイト名「Bada55」はBadassを表す。
 (Badassは英語のスラングで、
 クールやカッコいいという意味で用いる)
・アルファベットと数字を使って表せる
 英単語は英語で「leet」(リート) と言う。

BADA55

Looking for a BADA55 hex color word for your css code? Come here now! Yeah!

Color of Book

color-of-book

Color of Bookは、
本や雑誌 (日本発売) の表紙で使用される
配色パターンを表示してくれるサービス。

 特徴 ・ファッション誌とスポーツ誌の
 表紙から主に配色を調べれる。
・ブックデザインでの配色の参考になる。
 その他  

Color of Book

Ear Palettes

ear-palettes

Ear Palettesは、音楽のCDアルバムや
ジャケットの配色をまとめたサイト。

 特徴 ・音楽系配色見本サイト
・200種類ほどの音楽ジャケットなどの
 配色がストックされている。
 その他  

Ear Palettes

Found color

found-color

Found colorは、
お洒落な写真だけから抽出した3色の
配色カラーパレットのサイトになります。

 特徴 ・3色の配色パターン見本サイト
・お洒落でスタイリッシュな配色が揃う。
 その他  

Found color

Color schemes for web, UI and app sourced from minimal photography of everyday objects and encounters.

⑦ グラデーション関連
カラーツール

「グラデーション関連カラーツール」

綺麗で美しい配色を見ることができる
グラデーション関連のカラーツール。

デザインのトレンド(今時の流行)として
Webデザイン、グラフィックデザイン、
パッケージデザイン、ゲームデザイン等
様々な分野で利用されている配色です。

23のグラデーション関連カラーツール詳細

⑧ 知識系カラーツール

「知識系カラーツール」

 ジャンル  カラーツール名
 ⑧ 知識系  配色の見本帳
 色見本と配色サイト
Color-Sample.com
 色の名前と色見本

配色パレットだけではなく、
それぞれの色に関する情報や知識を
豊富に取り入れているカラーツール。

配色の見本帳

ironodata

配色の見本帳は、好みの色を選択すると
その色に関する非常に詳しい情報を
表示してくれるカラー情報サイトです。

 特徴 ・配色だけでなく、色に関する根本的な
 知識を学べるサイト。
・カラーチャート、マンガ配色検索、
 旅する配色見本、カラー成分測定、色の名前
 様々なコンテンツが用意されている。
 その他  

配色の見本帳

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理

色見本と配色サイト Color-Sample.com

color-sample-com

色見本と配色サイトは、
数々あるカテゴリから色見本を探せる
辞書みたいな配色見本のサイトです。

 特徴 ・Web上のフルカラー表現できる
 なんと1600万色の色を見れるサイト。
・メニューのメイン色からその色に関する
「画像」「Webサイト」「関連色」も見れる
 その他  

色見本と配色サイト Color-Sample.com

色の名前と色見本

irononamae-web

色の名前と色見本は、サイト名通り
色についての名称と実際の色などが、
一覧になっているサイトの1つです。

 特徴 ・結構昔からある配色サイト。
・色を日本名、英語名、仏語名、中国名の
 4言語から調べることができる。
・日本の和の色のページあり。
・JIS慣用名やHTMLで名前で指定できる色、
 Webセーフカラーもまとめてある。
 その他  

色の名前と色見本

色の名前とweb色見本。日本語、英語、フランス語、中国語の色名と色見本

⑨ データベース系カラーツール

「データベース系カラーツール」

 ジャンル  カラーツール名
 ⑨ データベース系  Browse Palettes
 COLORION

配色データが大量に閲覧できるツール。

Browse Palettes

browse-palettes

Browse Palettesは、COLOURLoversの
世界のユーザーが作った配色パレットを
見ることができるページの1つです。

 特徴 ・450万以上のユーザーが作った
 配色パターンを閲覧できる。
 その他  

Browse Palettes

COLORION

colorion

COLORIONは、
配色カラーパレットを約5万種類以上
収録した膨大なデータベースサイト。

 特徴 ・5色の配色パターン見本サイト
・スタンダード/マテリアル/フラットの
 3種類のパレットギャラリーから成る。
・カラーをコピー、保存、情報も
 見れて機能もしっかりしている。
・人気順に並び替えももちろんできる。
 その他  

COLORION

Curated Color Palettes with Search and Tags Support

⑩ その他のカラーツール

「その他のカラーツール」

 ジャンル  カラーツール名
 ⑩ その他  ウェブ配色ツール Ver3.0
 Contrast-A
 ColoRotate

その他の少しユニークなカラーツール。

ウェブ配色ツール Ver3.0  byフォルトゥナ

color-fortuna

ウェブ配色ツール Ver3.0は、
サンプルのページをプレビューしながら
自分の好きなようにページ全体の配色を
変更できる配色ジェネレーターになります。

 特徴 ・ウォルトゥナによるウェブ配色ツール
・右上のカラーピッカーを動かすことで
 サイト全体配色を自動に決定できる。
・ロゴから文字、背景細かい所まで変更可
 その他  

ウェブ配色ツール Ver3.0  by ウォルトゥナ

1色を選ぶだけでそこそこの配色をしてくれるツールです。高機能ではありませんが、おかしな配色になりにくいように色を自動調整します。

Contrast-A

contrast-a

Contrast-Aは、2のカラーの
コントラスト等が適切なものなのか
確認できるカラーツールになります。

 特徴 ・2色間のコントラストの良し悪しを
 調べることができるカラーツール。
・基本は英語表示
 その他  ※  Flash Playerが必要

Contrast-A

WCAG 2.0 Luminance Contrast Ratio Accessibility Color Picker

ColoRotate

colorotate

ColoRotateは、立体(3D)三角錐を使い
カラーパレットを作成するツールです。

 特徴 ・立体(3D)三角錐を使う珍しいツール。
・Web上のサービスではなくて、
 Apple Storeでダウンロードが必要。
 その他  

ColoRotate

配色を決める・探す際の参考

数多くの色見本になるであろう
カラーツールやサイトはどうでしたか?

色にはそれぞれ相性が良い・悪いの
色の組み合わせがありますね。

感覚や好みなどでも色を決めるのも
悪いことでは決してないですが、

色を決めた理由や根拠などがあることで
意味やコンセプトの説明や説得に役立ち
デザインやイラスト(作品)としても
さらに、魅力的なものができてきます。

デザインやイラスト制作の色選びのとき
これらのサイトを思い出してくださいね。

スポンサーリンク

シェアする