カラーパレットとは？初心者にもおすすめなツール22選！作り方や配色選びに | デジハリ・オンラインスクールデジタルハリウッドお役立ちWebマガジン「くりたま」

配色はデザインの印象を大きく左右する要素です。一方で、無限にある色の組み合わせから最適な色を選択するのはかんたんではありません。

今回の記事では、配色を考えるうえで背中を押してくれるような便利なカラーパレット系サービスをまとめてお届けします。デザイナーの方も、デザイナーではないけど配色に悩んでいる方も、ぜひとも参考にしてみてください。

カラーパレットとは？

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

カラーパレットの作り方

使うサービスによっても細かい配色の方法は異なるかもしれませんが、基本的なカラーパレットの作り方の流れを紹介します。

ベースとなる色を選ぶ

カラーピッカーを開いて、基本の色を選択します。明るすぎるものや暗すぎるものはできれば避けて、デザインによって与えたい印象を考えたうえで色を選ぶようにしましょう。
競合サービスとイメージがかぶらないようにするのも重要です。

明るい色を選ぶ

先ほど選択したベースカラーに加えて、明るい色を新たに選択します。パレット内のアーチになっている箇所から色を選択し、明るさを調整するのがポイントです。

暗い色を選ぶ

明るい色を選択したあとは、ベースカラーよりも暗い色をつくりましょう。アーチの箇所から色を選択し、明るさは暗いものを選ぶようにしましょう。

以上が基本となるカラーパレットの作り方です。
ここからは配色選びをしていくうえで役立つツールを一気に紹介していきます。

配色選びに便利なサービス10選

基本的な配色選びを進めていくうえで、これは間違いない！というお役立ちサービスをまずは紹介します。

Adobe Color CC

配色に悩んだとき役立つサービスといえば、こちらのAdobe Color CCを真っ先に思い浮かべる人は多いでしょう。PhotoshopやIllustratorなどAdobe系サービスとの配色の同期ができるのがとても便利。画像から色を抽出して配色のカラーパレットを作ることができるなど、小回りのきく機能がそろってます。

Scheme Color

1万以上ものカラーパターンが用意されているサイト。とにかくたくさんの色の中から自分にあった配色を選びたいときにオススメ。

BrandColors

FacebookやAmazonやTOYOTAなど世界中の企業のブランドカラーがわかる便利なサイトです。

Color Kitty

画像をアップした際に、自動で色を抽出して、センスのいい配色のカラーパレットを作ってくれます。もちろん手動での色の選択も可能。

Nippon Colors

和風の落ち着いた雰囲気の配色をしたい！という方にオススメなのがこちら。

ColorDrop.io

4色のカラーパレットがたくさん集まったサイトです。RGBのカラーコードをコピーできるのが便利。

Happy Hues

カラーパレットを選択した際に実際にサイトのカラーが変更されるので、イメージがつきやすいのが特徴です。

COLOURLOVERS

色に関する世界的なコミュニティです。世界中から集まったカラーパレットを閲覧できます。

Pigment

顔料と光量を調整することで、ナチュラルな配色を探すことのできるサイトです。写真からも配色を探せる点が便利。

Color Lisa

サルヴァドール・ダリやレオナルド・ダ・ヴィンチなど、世界の歴史的アーティストの配色が知れるというユニークなサイトです。

人工知能を使用して配色選びができるサービス4選

続いて、人工知能を用いて、自動、もしくは使うほど精度を上げながら配色選びができるようになるサービスを紹介します。

ColorMind

ディープラーニングによって、各ボタンをクリックすることで最適なカラーパレットを作成できるサービスです。

Palette List

基本の12色の中から2色を選択すると、無数の配色パターンをサジェストしてくれる便利なサービスです。UIUIXもかっこいいです。

Palettable

表示された色が好き（Like）か嫌い（Dislike）かを選択していくことで最適なカラーパレットが作成されていくという、直感的な配色探しにもってこいのサービスです。

Khroma

はじめに好きな色を50色決めて、好きな色に合わせて最適な色がサジェストされるサービスです。使えば使うほどAIによって自分にマッチした配色が提案されるようになります。

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

WebデザイナーやUIデザイナーの現場で実務の面で役立つようなサービスを紹介します。

Palx

ベースとなるカラーを選択して「Update」を押すと、マッチしたカラーを教えてくれるサービスです。JSONやCSSで配色をダウンロードできるのも便利です。

Copy Palettes

SVGのカラーパレットを作成し、FigmaやSketchにコピー＆ペーストで反映できるサービスです。

Colorable

配色のコントラストを確認するのに役立つツールです。カーソルを左右に動かすことで背景やテキストの濃淡や色合いを直感的に変更できます。

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

マテリアルデザインとは、Googleが推奨するデザイン手法のガイドラインのこと。そんあマテリアルデザインに沿ったカラーパレットサービスを紹介します。

Material UI Colors

マテリアルデザインのカラーの中から自分の気に入った色をワンクリックでコピーできる便利なサービスです。

Material.io

Googleがマテリアルデザインの概念を世界中に浸透させるためにつくったポータルサイトです。最先端のマテリアルデザイン関連の情報収集にどうぞ。
こちらのColor Toolも便利です。

Random Material Palette

ページをポチポチクリックするだけでマテリアルデザインの中からオススメのカラーパレットを表示してくれるサービスです。

写真から配色の抽出が可能なサービス2選

デザイナーであれば、この写真やイラストのカラーを抽出したい！と思うことは多いのではないでしょうか。そこで便利なのが、写真から配色の抽出ができるサービスです。

Color Palette Generator

画像のURLを入力することでその色にマッチした配色パターンを教えてくれるサービスです。

PhotoCopa

画像をアップロードすることで、その画像で使用されている色を自動分析し、カラーパレットを作成するサービスです。

デザインの基礎＆カラー・レイアウトを学べるおすすめ講座

カラーパレット系サービスを使えば配色選びが楽にはなりますが、最終的にベストなカラーを選んだり、レイアウトまで考えていくのであれば、デザインの基礎的な能力が不可欠です。

そこで、デザインの基礎＆カラー・レイアウトを学べるおすすめ講座を紹介します。

デザインの基礎＆カラー・レイアウト講座

講座内容・身につくスキルは？

オンラインのクリエイター養成スクール、デジハリ・オンラインスクールが提供するこちらの講座では、以下のようなスキルを身につけられます。

・デザインの概論
なぜデザインが重要なのか、その目的や理由をデザインのプロフェッショナルが教えます。

・色彩
色の分類や色彩の心理的効果、色彩調和・配色などなど、色彩に関する基本的な理論と実践を学習できます。

・デザインエレメント：点・線・面
デザインを構成する点、線、面のエレメントについてを学びます。

・レイアウト
カラーやエレメントをいかに最適なレイアウトに落とし込むかを学習します。

このようにデザインの基礎を体系的に学ぶことで、デザイナーはもちろん、非デザイナーであっても普段の資料作りなどあらゆる領域でデザインの力を発揮できるようになるための講座なのです。

こんな人にオススメ！

・配色の基礎知識を学び、状況や案件にふさわしい色選びができるようになりたい方
・“なんとなくレイアウト”から脱却したいデザイナー希望の方
・デザインの基礎を学び、資料づくりなどに活かしたい非デザイナーの方

すでにデザイナーとしてデビューしている方の基礎のおさらいから、非デザイナーだけど資料作成などでデザイナー的仕事が必要な方まで、幅広くオススメの講座となっています。デザインの力は商品の印象を大きく左右し、中長期でのブランドイメージや商品の売上にも大きく影響を与える可能性があるので、要チェックです！

Adobeをマスターするのにおすすめの講座

デザインに携わる仕事をするうえで、Adobe系のツールの使用は避けて通れません。配色がわかっても、それを実際にデザインに落とし込むには別のスキルが必要です。AdobeのPhotoshopやIllustrator、After Effects/Premiereなど、さまざまなツールを学ぶのにもってこいの講座がデジハリ・オンラインスクールの「Adobeマスター講座[ソフト付属]」です。