おしゃれな配色パターンがわかる！ カラーパレットジェネレーター16選

Webページや資料などを作成する際におしゃれに見せたいと思うことはないでしょうか。「おしゃれ」の定義は人それぞれ異なるので確かな正解があるわけではありませんが、デザインが整っていると洗練されて見えますよね。レイアウトだけでなく配色にもこだわると、デザインの知識がなくとも素敵な仕上がりになるかもしれません。

今回はデザイン経験のない人も簡単におしゃれな配色が生み出せる配色ジェネレーターを紹介します。

配色の重要性について

色は人の感情に影響を与えると言われており、Webページや資料作成においても配色次第では相手にインパクトを与えたり、安心感を与えたりすることができます。

配色を考えるにあたって調和と不調和という言葉があります。調和は共通の要素や性質を持った色同士の自然に見える組み合わせで、不調和は逆に自然に見えない色同士の組み合わせです。調和が取れた配色は好感をもたれやすく、一方で不調和の配色は心地よい印象は与えられませんが、相手の目を引かせることができるので場面によって使い分けてもよいでしょう。

調和には決まった法則はありません。しかし、客観的に見て心地よい配色や、心を動かされる配色を考えることがデザインを構成する上で鍵になります。色を無意味に足したり、統一感のない色を組み合わせたりすると、相手を不快な感情にさせることもあるので注意しましょう。まずは同系色でまとめるなど秩序を保った色づかいから始めることをおすすめします。

AIが搭載された配色ジェネレーター

ColorMagic

ColorMagicは、キーワードを入力することで、AI（人工知能）がカラーパレットを生成してくれる、クラウドサービスです。インストールが不要でWeb上で利用が可能。

使い方は、「パレットをつくる」から、色の雰囲気やイメージなどのキーワードを入力すると、AIがカラーパレットを生成してくれます。表示されたカラーパレットの各色をクリックまたはタップすると、カラーコードのコピーが可能です。

尚、利用できる回数がログインなし、無料プラン、有料プランでそれぞれ異なります。無料プラン+アカウント作成なしの場合は1日3回まで利用可能。無料プラン+アカウント作成ありの場合は1日5回まで利用が可能で、生成履歴の確認やお気に入り登録、手動での色調整機能が使用可能になります。有料プランだと、各種機能に加えて、生成制限が無制限で使用可能です。

配色のアイデアを増やしたい、直感的に使える配色ジェネレーターをお探しの方は、利用してみてはいかがでしょうか。

＞ColorMagic

Huemint

Huemintは商品パッケージやブランドロゴ、Webサイトなどひな形が用意されており、どのように配色が使用されるかデザインに落とし込んで視覚的に確認ができる配色ジェネレーターです。

こちらの、配色ジェネレーターもColorMagicと同様に、AIが実装されており、配色を提案してくれます。Generateをクリックすると、色の組み合わせを変更してくれ、サンプルとともにカラーコードが表示されます。

また、用意した画像をアップロードをすると、適切なカラーに変更をしてくれる機能もついており、多種多様な機能から配色を検討することが可能です。

配色によって最終的なデザインがどのように変わるのか、予めイメージしておきたい方におすすめのツールといえます。

＞Huemint

Palettemaker

大量の制作サンプルを見て、配色をイメージしたい場合におすすめなのが、「palettemaker.com」。

WebのUI／UXデザイン、ブランドロゴ、イラスト、ポスターなど豊富なデザイン例が用意されており、そのデザインに合わせてAIが配色パターンを生成してくれます。Huemintと似ている部分がありますが、こちらのツールは配色パターンを自動で「大量」に生成してくれるため、さらに豊富なパターンを見たいという方におすすめなツールです。

また、全ての機能を無料で使用でき、今後もアップデートをしていく予定とのこと。今後の新機能にも期待したいツールです。

＞Palettemaker

Khroma

他の生成ツールとは違い、その人の好みに合わせた配色を提案してくれる配色ジェネレーター「Khroma」。

最初に自分好みの色を50色選択することで人工知能（AI）が機械学習を行い、その人におすすめのカラーパレットを自動で生成してくれます。

テキストカラーと背景色の2色で作成される「Type」、2色を縦に並べる「Poster」、2色を合わせたグラデーションが確認できる「Gradient」2色を画像に落とし込んだ「Image」、そして4色の配色パターンが確認できる「Palette」。

さまざまな視点で配色パターンを確認することができます。好みの色を使って配色を決めたいときはこちらのツールを利用してみてはいかがでしょうか。

＞Khroma

Colormind（カラーマインド）

AIが自動でカラーパレットを作成してくれるツールで、気に入ったカラーは固定させたり、自身で調整したりすることが可能です。

Colormindには「Website Colors」という機能があり、その名の通りWebサイトに適した配色をAIが提案してくれます。デザイン例も表示されるので、実際にその色を使用した場合、どのようなサイトが出来上がるのかイメージすることができます。他にも画像をもとにカラーパレットを作成する機能もあります。

＞Colormind（カラーマインド）

よく利用されている配色ジェネレーター

Adobe Color CC（アドビカラーシーシー）

Adobeのソフトはインストールが必要なものがほとんどですが、Adobe Color CCはブラウザ上で利用できます。カラーホイールを操作するだけでカラーパレットが作成できるツールで、直感的に操作できます。

「探索」からはコミュニティに参加しているデザイナーが作成したカラーやテーマの閲覧ができるので、自分で作成するのが難しいという場合はこちらを参考にしてみてください。検索バーに探したいカラーのイメージを入力して探すこともできます。

また「トレンド」では、ファッションや建築などジャンルごとに分けられた最新カラーを閲覧することができます。なお、画像をもとにカラーパレットを自身で作成することも可能なので、デザイン未経験の人にもおすすめです。

便利な機能として、「アクセシビリティツール」というのがあり、色覚多様性に対応したカラーかどうかというのを調べることができます。

Adobe Color CCはもちろん他のAdobeソフトと同期もできるので、作成したカラーパレットをそのままPhotoshopやIllustratorで利用することもできます。作成したカラーパレットを保存する場合はAdobeのアカウントでログインする必要があります。

＞Adobe Color CC（アドビカラーシーシー）

Color Hunt（カラーハント）

ユーザーが投稿した4色のカラーパレットを閲覧することができ、新着や流行、人気といったカテゴリーから好みの配色を探すことが可能です。気になる色を見つけたらカーソルを合わせるとカラーコードが表示されるので、すぐにコピーして制作中のサイトや資料に活用できます。

サイト上に表示されているカラーパレットはいいねを押すことでストックでき、そのまま配色パターン画像を生成して保存（PNG）したり、リンクを取得したりしてほかの人に共有できます。

Chromeを利用している人は拡張機能としても展開されているので、インストールすることをおすすめします。

＞Color Hunt（カラーハント）

Coolors

多くの色を使用した組み合わせを考えたいという場合におすすめのツールです。デフォルトでは5色のカラーパレットが表示されますが、最大10色の配色パターンを作ることができます。スペースバーを押すだけで自動生成できるので、簡単に操作できるのもおすすめポイントです。

さらに画像をもとにカラーパレットを作成したり、カラーコードを直接入力して新たなパターンを作り出したりすることもできます。グラデーションの微調整機能にも優れており、気になった色は固定することが可能なので、自分好みの配色を見つけることができるでしょう。

作成したカラーパレットはPDFなどのファイルに保存したり、URLをコピーして共有したりすることもできますが、保存する場合は会員登録が必要です。もちろん他のユーザーが作成したカラーパレットも閲覧できます。

iOSアプリやChromeの拡張機能もあるので、日常的に使用したい人におすすめです。

＞Coolors

Happy Hues（ハッピーヒューズ）

選んだ配色を実際にサイトでどのように活用できるのかイメージできるツールで、通常の配色ジェネレーターと異なり、すでに用意されている配色パターンの中から選択します。見出しやボタンなど、パーツごとのカラーコードが表示されるので、そのままカラーコードをコピーして利用することができます。ただし、グラデーション調整などカスタマイズはできません。

＞Happy Hues（ハッピーヒューズ）

特に感覚的に利用できる配色ジェネレーター

Hello Color

画面を選択するだけで2色の配色パターンが確認できるというとてもシンプルなツールです。画面下には表示された2色と共通の要素を持ったカラーも表示されるので、3色以上に増やしたいときや近い組み合わせを探したいときに利用できます。

＞Hello Color

Pigment（ピグメント）

2色の配色パターンを確認できるツールで、いろんなバリエーションの組み合わせを確認したい人におすすめです。顔料（Pigment）と光量（Lighting）を調整することで一覧表示された配色パターンの色彩やコントラストが変化します。

イメージが沸かないときは検索バーをタップすると、無作為にさまざまな画像が表示され、それらからメインの2色が抽出されるという機能も搭載されています。さらに「Start a Logo」というメニューから、作成したカラーパレットをもとに、テキストを打ち込むだけでロゴデザインも生成してくれる機能もあるので、活用できる幅は広がりそうです。また、カラーパレットはSVGやASEなどのファイルでの保存とリンク取得での共有に対応しています。PNGやPDFには非対応です。

＞Pigment（ピグメント）

ColorSpace（カラースペース）

指定したカラーをもとに配色パターンを作成できるツールです。基準となる1色を選択すると、様々なカラーパレットが自動で作成されます。ベースカラーに近い色や相性のいい色など豊富な種類が表示され、それぞれカラーコードも表示されます。

また、「GRADIENT」という機能があり、指定した2つのカラーのグラデーションを8方向から確認することができます。この機能ではCSSコードが自動で作成されるので、Webページを作りたい方はぜひお試しください。なお、「3- GRADIENT」という類似機能を使うと、3色指定してそのグラデーションパターンを確認することができます。

＞ColorSpace（カラースペース）

Colorable

文字色と背景色の相性を確認できるツールです。文字と背景の色バランスを調整できる配色ジェネレーターは多くはなく、特にこちらはスライドバーを動かすだけですぐに色の変化が反映される簡単な仕組みなので、ぜひ押さえておきたいですね。「AAA」が最高で「Fail」だと問題ありと表示される、コントラストの評価機能もあります。カラーコードをそのままコピーすることができるので、資料作成時などファイルを開きながら気軽に利用できそうです。

＞Colorable

色について知識が得られるジェネレーター

Nipponcolors（ニッポンカラーズ）

日本ならではのカラーを探せるツールで、色名や色のもつイメージをより深く知ることができます。現時点（2021年9月）で搭載されているのは「撫子」「苺」「桜」など250種類のカラー。「MUNSELL」をオンにするとそれぞれのカラーがランダムに立体化されて表示されるので、色の仕組みを勉強する際に役立つのではないでしょうか。

使用したいカラーを見つけた場合はCMYK・RGB比が表示されるので、これを参考に入力、もしくはカラーコードをコピーすることも可能です。

＞Nipponcolors（ニッポンカラーズ）

ツールによっておしゃれな配色パターンは学べる

デザインという言葉を聞くと専門的な知識がないと難しいと考えてしまうかもしれませんが、今回紹介した配色ジェネレーターを使用すれば、誰でも簡単に色の相性を学びながらおしゃれなデザインを作ることができるでしょう。配色にこだわることでWebサイトや資料は素晴らしいものに仕上がり、場合によっては以前とは異なる反響があるかもしれません。

デザイン未経験の方もぜひ、この機会に触れてみてはいかがでしょうか。