2022.02.04

ウェブ制作

配色に迷ったときに役立つカラーパレットツール28選！

色はデザインにおいて重要な役割をもっており、ベースカラーにどのような色を組み合わせるのかといった配色でユーザーに与える印象は大きく変わってきます。
だからこそ配色を決めるのは難しく、センスを問われるため配色の選定には意外と時間が掛かってしまいがちです。

今回はそのようなときに役立つ、配色を提案してくれるサイトやツール、配色がコレクションされているサイトを紹介します。

配色に悩んだときに直感的にアイデアを与えてくれるサイトやツールなので、ぜひ活用してみてください。

カラーパレットとは

カラーパレットとは、ディスプレイに表示させる色の組み合わせを定義した情報のことです。ディスプレイは光の三原色（赤緑青）を組み合わせることで表示されます。各色の組み合わせを登録することで効率的に処理/作業できるようにするのがカラーパレットなのです。

ここからは配色選びをしていくうえで役立つツールを一気に紹介していきます。

カラーパレットツール28選

配色選びに役立つツール

Adobe Color CC

https://color.adobe.com/ja/create/color-wheel/
Adobe Color CCは、hotoshopやIllustratorなどAdobe系サービスとの配色の同期ができるので便利です。写真やイラストをアップロードするだけで画像から5つの色を抽出してくれます。色を抽出して配色のカラーパレットを作ることができるなど多くの機能が揃ってます。

COOLORS

https://coolors.co/
Coolorsはとてもシンプルなカラージェネレーターで、スペースキーを押すたびに、５色の鮮やかなカラーパレットを作成し提案してくれるサービスです。お気に入りの色があれば、その色だけ変更しないようにロックすることも可能です。色の組み合わせごとにURLが生成されるので、共有も手軽にすることができます。

Scheme Color

https://www.schemecolor.com/
1万以上ものカラーパターンが用意されているサイトです。各カラーパレットをクリックすると、そのカラーパレットのページに移動し、そのページではカラーの調整や各カラーの詳細情報の確認ができます。また、カラーパレットをダウンロードしたり、お気に入り登録することもできます。

BrandColors

https://brandcolors.net/
BrandColorsは、ウェブサービスのブランド色を検索できるサイトです。例えば、AmazonやMicrosoft、TOYOTAなど世界中の企業のブランドカラーがわかる便利なサイトです。その色のカラーコードが分かるので、気に入ったウェブサービスがどんな配色かを知りたいときに便利です。

Color Kitty

https://colorkitty.com/
Color Kittyは、シンプルなデザインのサイトで見やすく、画像をアップした際に、自動で色を抽出して、センスのいい配色のカラーパレットを作ってくれます。また、クリックするだけで色をクリップボードにコピーできるます。

Nippon Colors

https://nipponcolors.com/
藍や山吹色、橙など日本古来の色の名称は、英語のカラー名からはイメージしづらいときがあるもので、和風の落ち着いた雰囲気の配色をしたい！という方にオススメなのがこちら。

LOLCOLORS

http://www.lolcolors.com/
LOLCOLORSは、可愛いしずくの形をした4色の組み合わせを提案してくれるサイトです。可愛らしい色の組み合わせが数多くまとめられています。サイドバーから更新順や人気順でソートすることもでき、トレンドを意識しながら色の組み合わせを探すことができます。

Random Color Palettes

https://randomcolorpalettes.com/
Random Color Palettesは、スペースキーを押すたびに、５色のカラーパレットを作成してくれます。作成されたカラーパレットは、色の組み合わせごとにURLが生成されるので手軽に共有することができます。

ColorDrop.io

https://colordrop.io/
4色のカラーパレットがたくさん集まったサイトです。気になるカラーパレットをクリックすると右側に色の詳細が表示されます。RGBのカラーコードをコピーできたり、人気順に並び替えたりすることができ便利です。

Happy Hues

https://www.happyhues.co/
Happy Huesは、カラーパレットを選択した際に実際にサイトのカラーが変更されるので、イメージがつきやすいのが特徴です。そのセクションで使用されているカラーコードが表示されているので、そのまま真似することができます。

COLORION

http://www.colorion.co/
COLORIONは、5色の色の組み合わせがまとめられたサイトです。このサイトでは「MATERIAL DESIGN」「BASE COLOR」などカラーパレットの種類を選ぶことで色の組み合わせを探すことができます。種類はヘッダーの「PALETTES」から選択可能です。

Color Hunt

http://colorhunt.co/
Color Huntは、4色の色の組み合わせがコレクションされたサイトで、色んな色の組み合わせが毎日更新されています。トレンドや人気順でも検索することができます。また、Chromeの拡張機能を入れると新しくタブを開くたびに、色の組み合わせを提示してくれます。

COLOURLOVERS

https://www.colourlovers.com/
COLOURLOVERSは、世界中の人々が色、パレットや配色を、作成・共有する、色に関する世界的なクリエイティブコミュニティです。世界中で作成されたカラーパレットを閲覧できます。

Pigment

https://pigment.shapefactory.co/
Pigmentは、顔料と光量を調整により、最適なカラーパターンを探すことができるサイトです。DIC、PANTONE、RGBのカラーナンバーも明記されており、そのまま色を再現したり指示するのに便利です。

Color Lisa

http://www.colorlisa.com/
Color Lisaは、ピカソやダ・ヴィンチ、モネなど、世界の有名画家・アーティストの作品を基に配色パレットがまとめられたサイトです。

HELLO COLOR

http://jxnblk.com/hello-color/
HELLO COLORは、クリックすることで２色の色の組み合わせを提案してくれるサイトです。また、スペースキーを押すことで、提案された２色に合う色を表示してくれます。「コントラスト」に重点が置かれているところが特徴的です。

人工知能を使った配色選びができるつツール

ColorMind

http://colormind.io/
ColorMindは、映画やテレビゲーム、ファッションからアートまで、さまざまなものを素材に学習したカラーパレットで、ディープラーニングによって各ボタンをクリックすることで最適なカラーパレットを作成できるサービスです。

Colors UI

https://colorsui.com/
Colors UIは、お気に入りのカラーパレットを探すことはもちろん、カスタマイズも可能な美しい配色カラーパレット集です。カラーピッカーやマテリアルカラー一覧など配色に困ったときに参考にできる便利なツールです。

Palette List

https://www.palettelist.com/
Palette Listは、基本の12色の中から2色を選択すると、選んだ2色合う色相や補色を提案してくれる便利なサービスです。気に入った配色は「DOWNLOAD PALETTE」ボタンを押すとCSSやSASS、SVGにコピーができる点も便利です。

Palettable

https://www.palettable.io/
Palettableは、表示された色が好き（Like）か嫌い（Dislike）かを選択していくことで最適なカラーパレットが作成されていきます。Likeした色はそのまま残り、最終的に5色までのカラーパレットを作る事ができます。直感的な配色探しにもってこいのサービスです。

Khroma

http://khroma.co/
Khromaは、自分の好みの色を最初に50色決めて、好きな色に合わせて最適な色がサジェストされるサービスです。使えば使うほどAIによっての人におすすめの配色が提案されるようになります。

Webデザイン・UIデザイン系サービス

Palx

https://palx.jxnblk.com/
Palxは、メインカラーの一色を指定して「Update」を押すと、マッチしたカラーが生成されるサービスです。JSONやCSSで配色をダウンロードできるのも便利です。

Copy Palettes

https://copypalette.app/
Copy Palettesは、とてもシンプルな仕様で、ベースカラーを指定すると、SVGのカラーパレットが作成されるので、FigmaやSketchにコピー＆ペーストで反映できるサービスです。

Colorable

https://colorable.jxnblk.com/
Colorableとは、背景色と文字色のコントラストを自動判定してくれるツールツールです。カーソルを左右に動かすことで背景やテキストの濃淡や色合いを直感的に変更できます。

マテリアルデザイン系サービス

Color Palette Generator

https://www.degraeve.com/color-palette/index.php
Color Palette Generatorは、画像のURLを入力するだけで、その色にマッチした配色パターンを提案してくれるサービスです。また、カラーパレットをCSSやPhotoshopのスウォッチにもすることができます。