もし自動で相性の良い配色パターンを出してくれるツールがあったら最高じゃないですか？
今回は、WEBデザインや印刷デザインなどで色の組み合わせで迷った時に役立つ、自動で相性の良い配色パターンを作成してくれる神ツールを紹介します。
WEBデザインや印刷デザインでまず初めに決めるのはメインカラーだと思います。
メインカラーが決まった後には強調性や遊びを持たせるためにサブカラーをいくつか決めていくと思いますが、これに悩まされる事が多いでしょう。
そんな神的なツールが実際にあるのを知らないのは非常に勿体ない。デザイン関連の仕事をしているなら絶対に活用すべき。それ以外にもWEBディレクターや映像ディレクターなど進行役の仕事をしている人も絶対に知っておくべきです。
しかもめちゃくちゃクオリティが高いんです。
相性の良い配色を自動で作成してくれる神ツール
今回紹介するツールはクリエイティブソフトで有名なAdobe社の「Adobe color」というWEBツールです。
このツールは、メインのカラーを選択して、そのカラーとバランスが取れた相性の良いカラーパターンを自動で抽出してくれます。
また「カラーハーモニールール」と言う機能で簡単に同じメインカラーでもイメージの違ったパターンを抽出してくれるので、自分がイメージした雰囲気にあった相性の良いカラーパターンを簡単に見つけ出す事ができる様になっています。
次では、Adobe colorの細かい使い方を紹介しますが、まずは実際に触ってみるのが一番理解出来ると思います。
Adobe colorの使い方
Adobe colorのページに行くと下記のページが表示されます。
これはメインカラーを選択すると自動で相性の良いカラーパターンを抽出してくれる配色ジェネレーターになっています。
上記の写真では#008000のカラーをメインにして、その類似色を4つ抽出しています。
真ん中（Cの位置）にある▲の部分がメインカラー（ベースカラー）です。この部分のカラーコードを任意のものに変えるとそれに合わせて残りのABDEのカラーが自動でバランスの取れた配色に切り替わります。
次の写真は上記と同じメインカラーでカラーハーモニールールを「補色」に変えてみた場合です。
同じメインカラーでも随分イメージが変わった配色になります。
以下の部分ではカラーモードの変更やカラーの微調整が可能になっています。ここを使って自分が納得いくオリジナルのカラーパターンを見つけ出す事も出来ます。
これが基本的なAdobe colorの使い方です。
Adobe colorの神機能「テーマを抽出」
Adobe colorには「テーマを抽出」と言う超便利な神機能があります。
いきなりですが、クライアントにカラーのイメージはこんな感じです。と下記の画像だけを渡されたらどうしますか？
素人なら「緑」ってなりますが。それはあまりにも大雑把すぎて論外だと思います。
デザイン関連の知識が多少ある人なら「#1e781e」と「#30d417」あたりかな？といった感じでカラー辞典から雰囲気にあった配色を選択するでしょう。
それでも良いですが「本当にバランスが取れた配色になっていますか？ただあなたの勝手な感覚だけで選んでませんか？」
と痛いところを突かれた時に説明が出来ないのは本物のデザイナーとは言えません。
そんな時にAdobe colorの「テーマを抽出」の機能を使えば一発でイメージ画像の中から最適な配色パターンを機械的に抽出してくれます。
使い方は非常に簡単です。
Adobe color上部の「テーマを抽出」のタブをクリックしてそのページへ行き、画像をドラッグ&ドロップするだけです。
すると下記の様にイメージ画像内の色を抽出してくれて、イメージ通りのカラーパターンを提示してくれます。
また左側にあるカラームードを選択すれば、同じ画像内のカラーパターンでも、イメージの変わったカラーパターンを抽出してくれます。
これらは、膨大なデザインストックからカラーパターンをデータとして蓄積しているAdobeだからこそ出来る、超高精度なAIが抽出したほぼ完璧なカラーパターンだそうです。
試しにHSV、HSLの数値を見てみるとブレが非常に少ないので、明度や彩度がほぼ一定でバランスが保たれているのが分かります。
最新のカラーパターンを知りたい場合は
Adobe colorでは最新（旬な）カラーパターンを見る事が出来ます。さらにそこからカラーパターンを抽出して実際に使う事も出来ます。
下記のAdobe color上部にある「探索」のタブをクリックして下さい。
すると世界中のクリエイターが投稿したセンス抜群なカラーパターンがシェアされています。
例えば、中央にあるクラゲの画像をクリックしてみると下記の様に丁寧にカラーパターンを教えてくれます。
このまま16進数のカラーコードをコピペで使用しても良いですし、下の方にある「カラーコード」を押せばRGBやHSVでのコードも確認できます。
さらに右側のパネルではJPGなどの画像での保存が可能なので、クライアントに「こんなイメージのカラーパターンで良いですか？」とイメージを沸かせやすくも出来ます。
また一覧ページ上部には検索窓もあるのでモヤっとしたイメージからカラーパターンを探す事が出来ます。
例えば、森っぽいカラーを探しているなら「森」と検索すれば緑系の配色パターンが無数に出てくるでしょう。
以上が「自動でメインカラーと相性の良い配色パターンを抽出してくれるツール」でした。
まだ他にも色覚対応と言った色弱者用のカラーパターンを抽出したりグラデーションを抽出したりする機能もあります。
どれも非常に高精度なので、これを使えば配色で悩むことは一切なさそうです。
早速明日から使って行こう！！
