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