前回、様々な色相環を見ていきました。今回はいよいよ複数の色を組み合わせた「配色」の基本に入っていきます！複数の色はいったいどうやって選んでいったらいいのか？目的によって変わります。「主従をつける配色」「同等に分類する配色」の2つの目的で考えます。後半では私の愛してやまないadobe color CCの使い方も！
※参考：【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、イッテン、NCS、Web配色ツール） - クモのようにコツコツと
【目次】
配色の基本技法
今回ご紹介する配色の基本技法はこちらです！
- 主従をつける配色（メイン、ベース、アクセント）
- カラーパレットより面積比で考える
- アイデンティティ（同一色相）
- アナロジー（類似色相）
- ダイアード（補色）
- 同等に分類する配色（色相分割）
- トライアド（正三角形）
- テトラード（正四角形）
- ペンタード（正五角形）
- ヘクサード（正六角形）
それでは順番に見ていきましょう。
主従をつける配色（メイン、ベース、アクセント）
最初はカラーに「主従（メリハリ）」をつける配色技法です。
配色はカラーパレットより面積比で考えよう！
以前、「デザインのメリハリ」でも書いたように配色はカラーパレットを並べるよりも面積比で考えたほうがイメージがしやすいです。
※参考：デザインも配色も「メリハリ」が9割！基本を身につける学習方法 - クモのようにコツコツと
こちらをご覧ください。
どうですか？下の方がデザインがイメージしやすくないですか！カラーの主従は主にこの3つに分かれます。
- メインカラー：そのデザインの基調となる色です。キーカラーとも。
- アクセントカラー：メインカラーとは対象的なカラーを小面積に使い視線を引く目的。差し色とも。
- ベースカラー：背景など大きな面積に使用。メインカラー と同系色のトーンを落とした物が多い。アソートカラーとも。
面積比はおよそのイメージですが「25:5:70」を目安にするといいでしょう。
メインカラーは決まった！他の色、どうする？
何はなくとも最初に「色相環」から「メインカラー」を決めましょう。色相環は前回記事の「Adobe Color CC」の色相環を用いています。
※参考：【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、イッテン、NCS、Web配色ツール） - クモのようにコツコツと
色には「暖色」「寒色」などのイメージがあります。今回のデザインの目的にあうイメージはどれでしょうか。
さあ、メインカラー は決まった！次はアクセントカラーとベースカラーです。問題はここからです！適当に選ぶと思ったような効果が得られません。
以下の配色技法があります！
- アイデンティティ（同一色相）
- アナロジー（類似色相）
- ダイアード（補色）
順番に見ていきましょう。
アイデンティティ（同一色相）
アイデンティティ（同一色相）はメイン、ベース、アクセントの3色をすべて同一色相から選びます。違うのはトーン（明度、彩度）です。
トーンの変更は前回ご紹介した「HSBモード」で選ぶといいでしょう。
- H：色相環上の色相の角度
- S：色の彩度。鮮やかさ。下げると薄くなる。最後は白になる。
- B：色の明度。明るさ。下げると濁っていく。最後は黒になる。
※参考：【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、イッテン、NCS、Web配色ツール） - クモのようにコツコツと
ここではベースカラーの再度（S）を下げて、アクセントカラーの明度（B）を下げています。
1色相のみの世界のため、破綻が起こらない一番安全な配色ですが、単調な印象になるのが玉に瑕です。ここに白背景や黒文字などの「無彩色」と加えて変化を付けるのもいいでしょう。
アナロジー（類似色相）
アナロジー（類似色相）はメインカラーと隣り合った、近い色相なので破綻が起こりにくいです。
ただし、3色すべてを異なる色相にするとちょっと煩雑な印象になるかもしれません。
ここではベースカラーをメインカラーと同一色相のトーン違いとし、アクセントカラー を類似色相にしました。
ダイアード（補色）
ダイアード（補色）は色相環上でメインカラーの対極、真反対に位置する補色を選びます。
メインカラー とのメリハリは最もつきます。ただし、基調色と補色の面積比が近いとお互いが際立ちすぎて目がチカチカと痛くなります。
ここでは補色はアクセントカラーとして小面積で抑えています。（ベースカラーはメインカラーと同一色相のトーン違い）
同等に分類する配色（色相分割）
さて、これまでは色に主従（メリハリ）をつける配色でしたが、ここからは主従を付けない、同等に分類する配色を見ていきましょう。
例えば、信号機や地下鉄カラーなどのように色の違いで情報の「分類」を行いたいときがありますね。Webでいうとカテゴリによって色を変えたいとかですね。
このとき「赤、赤橙、橙、青」という組み合わせだとどうでしょう。「青」の色相だけが離れすぎて特別な意味を感じそうです（仲間はずれ、異質、特別など）。
色相の偏りをなくすには色相環上で均等な距離の色相を選択します。これを「色相分割」といいます。
色相分割には主に以下の種類があります。
- トライアド（正三角形）
- テトラード（正四角形）
- ペンタード（正五角形）
- ヘクサード（正六角形）
トライアド（正三角形）
トライアドは色相を正三角形に分割します。音楽編成の「トリオ」と近い言葉ですね。
色相環上で120度ずつ離れた色相になります。
テトラード（正四角形）
テトラードは色相を正四角形に分割します。港の「テトラポット」と近い言葉です。
色相環上で90度ずつ離れた色相になります。
ペンタード（正五角形）
ペンタードは色相を正五角形に分割します。アメリカの「ペンタゴン」と近い言葉です。
色相環上で72度ずつ離れた色相になります。
なお、ペンタードは前回ご紹介した「マンセル色相環」などの10色相に適用しやすい色相分割のため、12色相では中間的な位置になります。
※参考：【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、イッテン、NCS、Web配色ツール） - クモのようにコツコツと
ヘクサード（正六角形）
ヘクサードは色相を正六角形に分割します。クイズ番組の「ヘキサゴン」に近い言葉です。
色相環上で60度ずつ離れた色相になります。
これで、色相環上の等距離の偏りのない色が選択できました。
Adobe Color CCでの配色
ここからは実践編です。私の愛してやまない配色ツール「Adobe Color CC」での配色の方法です！！
※参考：https://color.adobe.com/ja/create/color-wheel/
Adobe Color CCの基本
最初に基本的な使い方から。画面の中央に色相環があります。この色相環は色相だけでなくトーンも変更できます（外側ほど原色）。
- 初期状態：初期状態は真右の赤（H360）にメインカラーがあります。
- メインカラーを移動：メインカラーを動かすと、サブカラーの形を保持したまま全体が動きます。
- サブカラーを移動：サブカラーを動かすと、メインカラーは移動せずサブカラーのみ左右対称で動きます。
- 数値入力：色相環の下のカラーパレットに直接数値を入力することもできます。中央の三角形付きがメインカラーです。
画面の左上に「カラーハーモニーを選択」があります。
- 類似色：アナロジー（類似色相）にあたる
- モノクロマティック：アイデンティティ（同一色相）にあたる-1
- トライアド：文字通りトライアド（正三角形）
- 補色：ダイアード（補色）にあたる
- コンパウンド：よくわからん。。（後述）
- シェード：アイデンティティ（同一色相）にあたる-2
- カスタム：サブカラーが左右対称でない完全に自由な配色
コンパウンドは私は使い方がよくわからなかったのですが、こちらに解説が！
※参考：https://design-tera.com/blog/archives/254/
間色で、ベースカラーと反対色（補色）をベースとしてその間の色を作ります。
先ほどの配色技法でカラーハーモニーにあらかじめ用意されてないものがありますね。これをどうにかする方法を考えました。
アイデンティティ（同一色相）
まずアイデンティティ（同一色相）はあらかじめ用意されています。「モノクロマティック」です！
モノクロマティックとシェードの違いはモノクロマティックはHSBのS（彩度）、B（明度）ともに変わるが、シェードはBのみが変わります。モノクロマティックの方が使いやすいでしょう。
アナロジー（類似色相）
アナロジー（類似色相）も用意されています。初期設定の「類似色」
初期の広がり方がちょうど12色相環の30度です！
ダイアード（補色）
ダイアード（補色）も用意されています。そう、「補色」ですね！
トライアド（正三角形）
ここからは色相分割編！トライアド（正三角形）は文字通り「トライアド」が用意されています。
テトラード（正四角形）
テトラード（正四角形）から先は初期設定では用意されていません。
まず最初に「類似色」の状態にします。一番外側のサブカラーを広げます。
そのまま反対側の位置で2色が重なるまで持っていきます。補色の位置になります。
これでテトラードの正四角形が完成します。このままメインカラーを動かせば色相を変えられます！
ペンタード（正五角形）
ペンタードは一番特殊な方法になります。12色相ではないため「目見当」が必要になります。
類似色の状態でテトラードと同じように広げていき…
上側のサブカラーのH（色相）値が「H40」。ここになったところで止めます！
これ、完全に目見当の世界なのですが数値的にも12色相環の中間値になっており、ほぼほぼ間違いないと思います！信じてくださいw
ヘクサード（正六角形）
最後、ヘクサードは組み合わせ技になります。
まずメインカラーの補色のH値を確認。
トライアドにして…
トライアドのメインカラーを補色にします
2つのトライアド画像を重ねる正六角形になります！
ちょっと手間ですが「合わせ一本」的な方法です。
配色ジェネレーター作りました！
※2021/08/16追記
この記事に書いたメインカラー、アクセントカラー、ベースカラーの三色構成で配色検討ができる配色ジェネレーターを作りました！
作ったアプリはこちら
※参考：配色ジェネレーター
アプリの使い方
ソースコード
※参考：GitHub - ryo-i/color-scheme-generator
ソースの詳細記事
※参考：【React】配色ジェネレーターを作った（HSBでメインカラー、アクセントカラー、ベースカラーを割り出す！） - クモのようにコツコツと
最後に
私は配色の勉強をし始めた時、カラーパレットがいっぱい載った「配色辞典」から入ったのですが、いざ自分でデザインするときに、どうしたらいいのかわかりませんでした。
「面積比」主従をつける配色（メイン、ベース、アクセント）の技法を知ってから配色がかなりしやすくなりました。アクセントカラー、ベースカラーの選択はアイデンティティ（同一色相）、アナロジー（類似色相）、ダイアード（補色）などの技法を手がかりにしてください。
また、後半の「色相分割」トライアド（正三角形）、テトラード（正四角形）、ペンタード（正五角形）、ヘクサード（正六角形）を作るとき、HSB値を均等に割ると見た目が自然になりません。私の愛してやまない「Adobe Color CC」を使って乗り切りましょう！それではまた。
※参考：「デザインの基本」記事まとめ
qiita.com
