こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
この記事では、普段使い可能な便利な
無料カラーツールをまとめています。
この記事の目次
普段使い可能な便利なカラーツール
配色選びに迷った際にまず始めに
参考にしている便利なカラーツールを
紹介しています。
様々なニーズに対応できると思います。
特に、次のような人は読んでみて下さい。
- 普段使い可能な便利な
カラーツールが知りたい。 -
普段使い可能なカラーツールを使いたい。
-
デザインに使えるカラーツールを探している。
普段使い可能な便利な
カラーツールまとめ
「普段使い可能な便利なカラーツール一覧」
| 系統 | カラーツール名 |
| Adobe社が提供するカラーツール | Adobe Color |
| 1万種類以上のカラースキームが ストックされているツール |
SCHEME COLOR |
| 4色の配色パターン見本 | ColorDrop |
| 2色の配色パターン見本 | Pigment |
| 2〜4色の配色パターン見本 |
Color Supply |
| 1つのキーカラーと調和する カラーを選んでくれるツール |
HUE/360 |
| 日本の伝統色見本 | NIPPON COLORS |
| Canvaが提供するカラーツール | Canvas Colors |
| ワンクリックで配色を見つけれる カラーツール |
Sphere: Color Theory Visualizer |
| 終了したカラーツール | ColorKitty |
下でそれぞれ詳しく紹介しています。
Adobe Color
Adobe Colorは、Adobe社が提供する
あまり知られていない配色ツールです。
色の知識がなくてもバランスの取れた
色の組み合わせを簡単に実現できます。
| ツール名 | Adobe Color |
| 特徴 | ・カラーハーモニー(色同士の関係性)から、 優れた配色パターンを生成できる。 ・中央にある丸いカラーピッカーの操作で 色相や明度を変えることが可能。 ・インターフェイスもシンプルで日本語対応 ・他のデザイナーが作成した便利な 「カラーギャラリー」等も備わっている。 ・アップル製品（iPhone・iPadなど) で 撮った写真素材からカラーパレット作成、 Adobeサービスと連結して使える。 |
| おすすめの人 | ・Adobe社が提供するカラーツールを 使いたい人 |
| その他 | ・カラーハーモーの切り替えの種類 「類似」「モノクロマティック」「補色」 「トライアイド」「コンパウンド」 「シェード」「カスタム」 |
Adobe Color
SCHEME COLOR
SCHEME COLORは、1万種類以上の
カラースキームがストックされている
Webサイトの1つになります。
| ツール名 | SCHEME COLOR |
| 特徴 | ・4〜6色の配色パターン見本サイト ・1万種類以上の豊富なカラーパターン ・配色の編集やダウンロード可能。 |
| おすすめの人 | ・1万種類以上のカラースキームを見たい人 |
| その他 |
SCHEME COLOR
ColorDrop
ColorDropは、グリット上に
4色の配色の組み合わせが並ぶ
配色見本のサイトの1つです。
| ツール名 | ColorDrop |
| 特徴 | ・4色の配色パターン見本サイト ・フラットデザインを作りやすいパレット ・16進数/RGBコードでカラーをコピー可。 ・ソートやフィルタリング等の機能も多数。 ・画面上部のプルダウンで人気順に変わる。 ・画面上部の右の筆のアイコンを押すと、 ダークモードや背景の変更ができる。 |
| おすすめの人 | ・4色の配色パターン見本を見たい人 |
| その他 |
ColorDrop
Pigment
Pigmentは、Pigment (顔料) と
Lighting (光量) を調整しながら、
使いやすいナチュラルな配色を探せる
便利で珍しいカラーツールになります。
| ツール名 | Pigment |
| 特徴 | ・2色の配色パターン見本サイト ・右上の検索ボックスから画像をベースに 配色を見つけることも可能。 ・DPT紙のデザインでもかなり重宝 |
| おすすめの人 | ・2色の配色パターン見本を見たい人 |
| その他 |
Pigment
Color Supply
Color Supplyは、カラーチャートを回し
好きな配色を探せる便利なツールです。
| ツール名 | Color Supply |
| 特徴 | ・2〜4色の配色パターン見本サイト ・類似色やトライアドなどの色相環から、 優れた色の組み合わせを見つけられる。 ・ポップで使い勝手の良いカラーツール ・アイコンイラストやグラデーションでも 色をすぐに確認できるのが良い。 ・3色の配色を探せる数少ないツールの1つ |
| おすすめの人 | ・2～4色の配色パターン見本を見たい人 |
| その他 |
Color Supply
HUE/360
HUE/360は、
「Brightness」で色の明るさを選択し、
使いたい色を色環からクリックすると、
選べる色の数が減り相性のいい色だけ
残っていくという便利なカラーツール。
| ツール名 | HUE/360 |
| 特徴 | ・1つのキーカラーと調和する カラーを選んでくれるツール。 ・ページ下で選択した色のHEX値まとめと 「Print User Color」でコードが見れる。 |
| おすすめの人 | ・1つのキーカラーと調和する カラーを選んでくれるツールを使いたい人 |
| その他 | ・「shift + 色」で背景色を選んだ色に変化 |
HUE/360
NIPPON COLORS
NIPPON COLORSは、
日本の伝統色を扱う代表的なサイト。
和風のデザインを作る時には、
是非参考にしたいサイトですね。
| ツール名 | NIPPON COLORS |
| 特徴 | ・見やすいスッキリしたカラーチャートと 美しいアニメーションが魅力的なツール。 ・日本の伝統色 (日本での色の呼び方) の 「名称」「CMYK /RGB」を確認可能。 ・微妙な色の違いが名前で表現されている。 ・右の「MUNSELL」を「ON」にすると 3Dになるという遊び心あるデザイン。 |
| おすすめの人 | ・日本の伝統色の見本を見たい人 |
| その他 | ※ 3Dは「Safari」「Chrome」しか 見れないので注意が必要になる。 |
NIPPON COLORS
Canva Colors
Colorsは、Canvaが提供している
カラーツールをまとめたページ。
| ツール名 | Canva Colors |
| 特徴 | ・「Color palette generator」では、 アップロードした写真から配色を抽出可能。 (アップロードもドラッグ&ドロップで簡単) ・「Color palette ideas」では、 約4000の4色の配色パターンを見れる。 ・「Color wheel」では、 色環(カラーホイール)で色の理論を学べる。 ・「Color meanings」では、 参考になる色の検索・意味などを調べれる。 |
| おすすめの人 | ・Canvaのカラーツールを使いたい人 |
| その他 |
Canva Colors
関連記事
Sphere : Color Theory Visualizer
Sphere: Color Theory Visualizerは、
1つのカラーを選択することによって、
簡単にカラーリングを表示できるサイト。
| ツール名 | Sphere: Color Theory Visualizer |
| 特徴 | ・ワンクリックで配色を見つけれるサイト ・パターンも沢山の選択できて 「Harmony」「Vision」「Quantize」を 変更して様々なカラーリングが可能。 ・「Adobe Color」と同じようなツール |
| おすすめの人 |
・ワンクリックで配色を見つけれるツールを 使いたい人 |
| その他 |
Sphere : Color Theory Visualizer
終了した普段使い可能な便利な
カラーツール
「終了したカラーツール」
- ColorKitty
今まで大変お世話になった
普段使い可能な便利なカラーツール。
本当にありがとうございました。
ColorKitty
ColorKittyは、画像をアップロードすると
その画像に含まれる色を自動で抽出して、
カラーパレットを表示してくれたツール。
| ツール名 | ColorKitty |
| 特徴 | ・画像からカラーを抽出するツール。 ・選択された配色は画像上でドラック移動で 色を変更することができた。 |
| おすすめの人 | ・画像からカラーを抽出するツールを 使いたい人 |
| その他 |
まとめ
以上が、普段使い可能な便利な
カラーツール10選まとめでした。
なお、その他の無料カラーツールは
下の記事に一通りまとめています。
また、配色に関わる書籍・本は
次の記事を参考にしてみてください。
