Adobe カラーパレットジェネレーターの「カラーホイール」には基本的な色彩理論に則ったカラーハーモニーが用意されています。
色彩調和の知識がなくても、Adobe Colorが配色を提案してくれるので、とっても便利です。
しかしながら、シェードやトライアドなど、それぞれのハーモニー名称が何の色彩調和を示していてどのような色を提案しているのかは少し勉強が必要です。
今回は、Adobe Colorに用意されているカラーハーモニーがどのような色彩調和を示しているのかについて綴ってまいります。
※色彩検定の勉強中なので、個人的なアウトプットの要素をかなり含みます(笑)
Adobe Color
Adobe Color:https://color.adobe.com/ja/create/color-wheel
Adobe Colorでは、この記事で扱うカラーホイール以外にも、WCAGのレベルにコントラスト比が合格しているか否かのアクセシビリティツールも用意されています。
色を扱う上で、便利なツールが揃っていますので是非、ご活用ください!
類似色
「類似色」では、明度と彩度が同一の近似した色相を提案してくれます。
同一トーンや類似トーンを用いた配色から、ドミナントトーンやトーンイントーンとも呼べます。

提案された配色をPhotoshopで確かめてみると、S(彩度/Saturation)とB(明度/Brightness)が同一であることが分かります。

モノクロマティック
「モノクロマティック」では同一色相、もしくは近似色の明度と彩度に差を持たせた配色を提案してくれます。
同一色相(近似色)でトーンを自由に選択できることから、ドミナントカラーやトーンオントーンとも呼べます。

提案された配色をPhotoshopで確かめてみると、H(色相/Hue)が同一、もしくは色相差1~3の近似色であることが分かります。

トライアド
「トライアド」では、色相環を3つに均等に割り、正三角形をつくるように配色された色を提案してくれます。
それぞれの色相の間隔が均等なため、対照色相配色の中でもバランスに優れています。

補色
「補色」は、メインカラーと、その色相環で正反対にある色の組み合わせを提案してくれます。
補色はメリハリをもたらすことができ、補色を用いた2色配色をダイアードとも呼びます。

分割補色
「分割補色」では、メインカラーと、メインカラーの補色関係である色の両側の色相を用いた配色を提案してくれます。
補色の両側の2色が色相の共通性を持つため、全体的に調和を図りやすくなります。分裂補色配列やスピリットコンプリメンタリーとも呼ばれます。

正方形
「正方形」では、色相環を均等に4分割して正方形になるように選ばれた配色を提案してくれます。
正方形を描く4色配色は、テトラードとも呼ばれます。

コンパウンド
「コンパウンド」では、メインカラーの補色と、それぞれの隣接色を合わせた配色を提案してくれます。

シェード
「シェード」では、同一色相で彩度が同じ色相の、明度に差を持たせた配色を提案してくれます。
中明度の色が用意されるのも特徴です。同一色相でトーンが異なることから、ドミナントカラーやトーンオントーンとも呼べます。

提案された配色をPhotoshopで確かめてみると、H(色相/Hue)が同一、S(彩度/Saturation)も同一、もしくは近似値であり、B(明度/Brightness)に差があることが分かります。

配色を検索する
これまでに紹介してきたカラーホイールで作成する配色は非常に便利ですが、
「メインカラーを選ぶの面倒」
「イケてる配色をそのまま使いたい!」
「誰か配色を決めてくれ!」
「カラーホイール、思ったようにいかなかった」
そんな時に、手間をかけずに配色ができるツールもAdobe Colorには存在します!(アリガタヤ~)
Adobe Colorの「探索」からテーマに沿った配色テンプレートをダウンロードすることができます。

探索の隣にある「トレンド」では、それぞれの業界の最新カラートレンドを入手することができます!
Adobe Colorを使って、色を制する!!!!!!!!!!!!!ぜひ、お試しください♪
作成した配色をIllustratorのスウォッチに追加する
Adobe colorとIllustratorの連携方法はこちらの記事で紹介しています。ご参照ください。