カラーハーモニー：本当に機能する配色を作る方法

カラーハーモニーはセンスではない。幾何学だ。心地よく感じるパレットはすべて、カラーホイール上の固定された関係性であり、意図的に再現できる。

それが、ほとんどの「カラー理論」記事がスウォッチギャラリーの下に隠している秘密のすべてだ。優れた配色の色たちは、たまたまうまくいく友人ではない。ホイールの周りに意図的な角度で配置された点であり、その角度こそが機能する理由だ。

幾何学が見えてくると、色選びは追いかける感覚ではなく、下す決断になる。これはシステムであり、ムードボードではない。

カラーハーモニーが実際に意味すること

カラーハーモニーとは、目がランダムではなく秩序があると読み取る形で色を配置することだ。ハーモニーとは、色同士の関係が一貫しているときに生まれるものであり、個々の色が美しいときに生まれるものではない。

なぜ気にする必要があるのか？その判断は速く、容赦ない。Interaction Design Foundationがバーゼル大学とGoogleの研究を引用して述べているように、人はデザインの魅力を約17ミリ秒から50ミリ秒で判断し、その瞬間的な判断は主に色と構成によって行われる。第二の第一印象はない。

ハーモニーには意味もある。Joann と Arielle Eckstut が述べているように、「色はブランドのペルソナと一致する感情を象徴できる」とInteraction Design Foundationが引用している。関係性は、一言も読まれる前に感情を設定する。各色が実際に何を伝えるかというより深い層については、各色が実際に何を示すかを別途解説している。

カラーホイールがすべてのゲーム

カラーホイールは、すべての色相が他のすべての色相に対してどこにあるかを示す地図だ。ハーモニーの配色は、その地図に落とす形に過ぎない。形を回転させれば新しいパレットが得られ、同じバランスを保つ。

これは民間伝承ではない。Sensational Colorが説明するように、クラシックなハーモニーは「スペクトルのバランスをとる色の組み合わせ」であり、「カラーホイール上の色相の関係を視覚化するために幾何学的な形を使うことができる」。形がレシピだ。ホイールはキッチンだ。

三つの関係性が重要な役割を担っている：

• 反対側の色相はホイールの向こう側に位置し、コントラストを生む。
• 隣接する色相は並んで位置し、まとまりを生む。
• 等間隔に配置された色相はホイールを等しいスライスに分割し、バランスを生む。

この三つをマスターすれば、実際のブランドの90%が使用している配色をカバーできる。

重要な6つの配色

知っておく価値のあるクラシックなハーモニーは6つある。Sensational Colorによれば、それぞれはホイールの周りを回転させる幾何学的な形であり、予測可能な感情を生み出す。

最初からすべて6つは必要ない。多くの現役デザイナーはそのうち3つ、つまり補色・類似色・三色配色の中で生きている。残りの3つは、基本の配色が行き詰まったときに手を伸ばすバリエーションだ。3つのコア配色がそれぞれ活躍する場面はこうだ。

補色：最大のコントラスト、最小の労力

補色とは、青とオレンジ、赤と緑、紫と黄のように、ホイール上で直接反対側に位置する2つの色相を意味する。その対立こそがポイントだ。

なぜ知覚的に機能するのか？反対側の色相は波長の隣人をほとんど共有しないため、目は最大の分離を読み取る。その分離がコントラストであり、コントラストが注目だ。これが、ニュートラルなフィールドに補色のアクセントを置くことが、デザインで最も信頼できる「ここを見て」ツールである理由だ。

FedExは教科書的な例だ：紫とオレンジのワードマーク、ホイール上で反対に位置する2つの色相。コントラストはどんなサイズでも生き残るほどクリーンで、ネガティブスペースの矢印の中にさえ隠れている。

落とし穴：全彩度で、並べて、等量で補色を使うと振動する。同じ音量で叫ぶ2つの反対色は同じ注意を奪い合い、目を疲弊させる。解決策は比率であり、後述する。

類似色：穏やか、まとまり感、低リスク

類似色とは、ホイール上で隣り合う3〜4色相を意味する。黄、黄緑、緑のようなイメージだ。隣同士なので混ざり合う。

これが滑らかに感じる理由は波長の近接性だ。隣接する色相はスペクトル範囲のほとんどを共有するため、色の間の遷移は穏やかで、目はそれらを一つのファミリーとして読み取る。対立がないため争いもない。

Stripeのブランドはテックで最も明確な例だ。そのシグネチャーヒーローグラデーションは、ホイール上で隣り合う青、紫、ティールの色相を流れる。グラデーション内で何も争っていないため、効果はプレミアムで穏やかだ。

類似色は選べる中で最も低リスクの配色だ。だからこそ、平坦に見える可能性がある。対立がないため、色相ではなく明度（明暗）でコントラストを作り出す必要がある。明度を正しく設定すれば類似色は高級に見える。省略すると霧のように見える。

三色配色：混乱なしのバランスとエネルギー

三色配色とは、ホイールの周りに等間隔、つまり3分の1ずつ配置された3つの色相を意味する。ホイールに正三角形を落として、3つの頂点を読み取る。

等間隔配置こそが機能する理由だ。各色相は他の2色から等距離にあるため、位置によってどの一色も支配しない。補色ペアの正面衝突なしに、複数の異なる色の活気を得られる。審判つきのエネルギーだ。

落とし穴は、等しい強度の3つの鮮やかな色相がすぐにサーカスになることだ。三色配色がバランスを保つのは、1つの色相がリードし、他の2つがサポートするときだけだ。幾何学は位置のバランスを与えてくれるが、比率のバランスは与えてくれない。比率は依然としてあなたの仕事だ。

これはすべての配色に共通するテーマだ：ホイールが関係性を渡してくれる、あなたは各色をどれだけ注ぎ込むかを決める。

実際のブランドが配色を選ぶ方法

ブランドは楽しみで配色を選ぶのではない。ブランドが必要とする感情を生み出す配色を選び、それを規律をもって適用する。幾何学にきれいに対応する4つのブランドを紹介する。

Spotifyは規律のケースだ。アイデンティティは単一の緑に乗り、新しい色相ではなくティントとシェードで変化させる。これが正しく行われたモノクロマティックだ：明度からの奥行き、色を追加することからではない。一色相、完全な記憶定着。

Duolingoはライブプロダクトとして同じロジックを実行する。インターフェースは支配的な緑でリードし、状態と報酬のためにハーモナイズされた少数のアクセントを取り込む。アクセントが緑と競争するのではなく、緑に奉仕するため、カラフルでありながら混沌としていない。

これらのブランドのどれも、必要以上の色を使っていないことに気づくだろう。その節制がブランドだ。

ブランド全体、一つの画面だけでなく通用するパレットが必要？Brainyはカラーシステムを構築する。Brainyにブランドパレットを依頼する。

ハーモニーを台無しにするミス

壊れたパレットのほとんどは、同じいくつかの理由で失敗する。「醜い」色を選んだことについてではない。関係性を無視することについてだ。

• 等しい比率。 すべての色に同じスペースを与えると階層がなくなり、目に休む場所がない。
• 全彩度のすべて。 すべての色相が最大強度のとき、何もリードせず全体がブザーを鳴らす。
• 明度コントラストなし。 同じ明度の色は、特に類似色配色では、並べた瞬間に泥になる。
• 色相が多すぎる。 4色を超えると、手でハーモニーを保つことが非常に難しくなる。これが四色配色が救うより多くのパレットを台無しにする理由だ。
• コンテキストの無視。 あなたのモニターで輝いたパレットが、日光の下でスマートフォンでは死ぬかもしれない。関係性は実際の画面で生き残らなければならない。

最も深い修正は統一性であり、古い画家のトリックがある。アーティストのMallery Janeが説明するように、「カラーハーモニーを作る一つの方法は、マザーカラーと呼ばれるテクニックを使うことだ。一つの色（マザーカラー）を少し取り、すべての混合に加える。」すべてが共通のアンダートーンを共有することになり、パレットは委員会ではなく一つのファミリーとして読まれる。

一色からパレットを構築するワークフロー

coolors.coでパレットを生成する

インスピレーションは必要ない。プロセスが必要だ。Interaction Design Foundationは、現役デザイナーが実際に使う繰り返し可能なプロセスを提示している：インスピレーションを見つける、支配色を選ぶ、関係性のためにカラーホイールを参照する、ジェネレーターを使う、比率で階層を定義する、コントラストを確保する、プロトタイプを作る、ユーザーでテストする、フィードバックを反復する。

ここではそのプロセスを、一つのベース色から実行できるワークフローに圧縮する。

1. 一つのベース色を選ぶ。 ブランド、プロダクトの感覚、または手放せない一色から始める。これがアンカーだ。
2. 色ではなく、関係性を選ぶ。 まず感情を決め、次に幾何学に他の色相を渡させる。穏やかなら類似色。パンチなら補色。活気なら三色配色。
3. ホイールから他の色相を読み取る。 対応する形を落として点を取る。目分量でやらない。ホイールは直感より正確だ。
4. 色相を追加する前に明度を正しく設定する。 アーティストのChou（@hong_chou_）が示す強力な動きは、「かなりモノクロマティックなカラーパレットから始め、まずコントラストと明度を正しく設定する」こと、次に「ハーモニーを失わずに最も明るいエリアに他のいくつかの色相を導入する」ことだ。明度が骨格だ。色相は肌だ。
5. マザーカラーで統一する。 ベースのトレースを他のすべての色に混ぜて、共通のアンダートーンを共有させる。
6. 比率を割り当てる。 60-30-10ルールを使って、一色がリードし、一色がサポートし、一色がアクセントになるようにする。次にそれについて詳しく述べる。
7. コンテキストでテストして反復する。 実際の画面で、実際のサイズで、実際のコンテンツに対してチェックする。調整する。出荷する。

配色にムードをマッチさせる

まず感情を選べば、これが参照するテーブルだ。

比率について：ステップ6が重要な理由は、関係性だけでは階層が作れないからだ。60-30-10ルールがそれを修正する。House Beautifulが説明するように、「支配色に60%、セカンダリカラーに30%、アクセントシェードに残り10%」を使う。そのスプリットは別の記事で完全に取り上げているので、ここではリマインダーとして扱う：支配色は通常穏やかな基盤であり、アクセントは補色の色相がその役割を果たす場所だ。

ホイールの数学をやってくれるツール

color.adobe.comで試す

角度を手計算する必要はない。いくつかの無料ツールが幾何学を実行して16進コードを渡してくれる。

警告：ツールは考えることを省略しやすくする。ジェネレーターは数学的に有効な関係を渡すが、あなたのブランド、コントラストのニーズ、またはアクセントが白地でアクセシビリティチェックをパスするかどうかを知らない。ツールはホイールの数学を行う、あなたはまだ判断を行う。さらに多くの色とデザインの解説を一か所にまとめている。

FAQ

カラースキームとカラーハーモニーの違いは何か？

カラースキームとは、あなたが選んだ特定の色のセットだ。カラーハーモニーとは、それらの色をランダムではなく秩序があるように読み取らせる関係性だ。優れたスキームはすべてハーモニーの上に構築されているが、ハーモニーなしにスキームを組み立てることもでき、その場合はノイズになる。

パレットにはいくつの色が必要か？

ほとんどのブランドには3〜5色で十分だ。House Beautifulが説明する60-30-10の比率で適用された、一つの支配色、一つか二つのセカンダリカラー、一つか二つのアクセント。4つの異なる色相を超えると、手でハーモニーを保つことが難しくなる。これが、Spotifyのような規律あるブランドが多くのティントを通じて単一の色相に乗る理由だ。

初心者に最適な配色は何か？

類似色またはモノクロマティック。どちらも正面からのコントラストを避けるため、許容範囲が広い。モノクロマティックは一つの色相の中で作業するため、ほとんど壊すことが不可能だ。類似色は隣同士の明度コントラストを管理するだけでよい。

ぶつかったり振動したりしない補色の作り方は？

等量や等彩度で使わない。一つの色相がスペースを支配するようにし、反対側を小さく、しばしばより彩度の高いアクセントとして保つ。60-30-10のスプリットは、2つの反対色が同じ音量で争うことを止めるために存在する。

カラーハーモニーはユーザーの反応に本当に影響するか？

最初の印象に測定可能な影響を与える。Interaction Design Foundationはバーゼル大学とGoogleの研究を引用し、人々が17ミリ秒から50ミリ秒でデザインの魅力を判断し、主に色と構成に基づいていることを指摘している。ハーモニーはその瞬間的な判断が読み取っているものだ。

パレットジェネレーターを使って理論を省略できるか？

数秒で有効な関係を生成することはできる。ジェネレーターができないことは、比率の設定、明度コントラストの修正、アクセシビリティのチェック、またはあなたのブランドの意味を知ることだ。理論こそが有効なパレットを機能するパレットに変えるものだ。

色を当て推量するのをやめる

カラーハーモニーはあなたが持っているかどうかのギフトではなく、実行できるシステムだ。ホイールが関係性をエンコードし、6つの配色はそこに落とす形であり、比率と明度が関係性を機能するパレットに変える。

一つのベース色を選び、感情を選び、幾何学から他の色相を読み取る。明度を正しく設定し、マザーカラーで統一し、60-30-10に分割し、実際に使う場所でテストする。これが全メソッドであり、毎回直感を上回る。

心地よく感じるパレットは偶然ではない。ホイール上の関係性であり、名前をつけて再利用できる。

ブランド全体、一つの画面だけでなく通用するパレットが必要？Brainyはカラーシステムを構築する。Brainyにブランドパレットを依頼する。