配色はデザインの印象を大きく左右する要素です。一方で、無限にある色の組み合わせから最適な色を選択するのはかんたんではありません。
今回の記事では、配色を考えるうえで背中を押してくれるような便利なカラーパレット系サービスをまとめてお届けします。デザイナーの方も、デザイナーではないけど配色に悩んでいる方も、ぜひとも参考にしてみてください。
関連：
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マスター講座[ソフト付属]」です。
Adobeマスター講座の特徴
AdobeのPhotoshop、Illustrator、After Effects/Premiere、HTML/Dreamweaver、InDesignなどAdobe Creative Cloudの基礎をマスターできる講座です。
また、なんといっても、1年間のソフト使用料が講座料金に含まれているというお得な内容。まさに、これからデザインの基礎を学び、実際にアウトプットまでできるようにしたい！という方にはもってこいの講座なのです。
講座内容
デザインの基礎とAdobeソフトの使い方をまとめた動画教材をもとに学習は進んでいきます。デジタルハリウッド約20年の教育ノウハウに基づいて制作された基礎動画教材は46時間にも及ぶ、体系的な内容となっています。
またプロからの課題添削フィードバックが受けられるのもウレシイところ。「独学で癖がつくのが心配」という方にもオススメです。
また、講座はオンラインで学習するのに最適化された内容となっており、好きなときに好きな場所で学習できます。地方在住で、近くにデザインスクールがないという方にも向いているでしょう。
まとめ
今回の記事では、カラーパレットのおすすめツールをまとめて紹介しました。色はデザインの印象を決定づけるうえでの非常に重要な要素です。ぜひとも、ツールを活用するのはもちろん、デザインの基礎を定期的に学ぶことで自身のスキルアップに務めることをオススメします。
非デザイナーの方も今回の記事を参考にワンランク上での配色を実現させてみてください。