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

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

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

配色の重要性について

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

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

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

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

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

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

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

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

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

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

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

Color Hunt（カラーハント）

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

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

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

＞Color Hunt（カラーハント）

Colormind（カラーマインド）

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

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

＞Colormind（カラーマインド）

Coolors

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

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

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

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

＞Coolors

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

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

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

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

Hello Color

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

＞Hello Color

Palettable（パレッタブル）

表示されたカラーを好きか嫌いかの2択で振り分けてカラーパレットを作成するツールです。嫌いを選ぶとカラーが変更され、好きを選ぶと次のカラーが表示され、それを繰り返すことで最大5色の配色パターンを作ることができます。

好みや気分に応じて操作すればいいだけなので、直感的に決めることができるでしょう。シンプルな仕様ですが、グラデーションの調整も行うことができ、作成したカラーパレットはPNGでの保存とリンク取得での共有に対応しています。

＞Palettable（パレッタブル）

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サイトや資料は素晴らしいものに仕上がり、場合によっては以前とは異なる反響があるかもしれません。

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