色彩調和ルール：補色、三色、四色、そして各々の使い分け

色彩理論は学問的に聞こえます。実際には、優れたデザイナーが何も考えずに手を伸ばす小さなツールボックスです。7つの古典的な調和がパレット作業の95%をカバーしています — それぞれを知り、いつ使うかを理解することが、意図的に感じるパレットと偶然に感じるパレットの違いです。

ホイールはコンパス

すべての調和ルールは12分割の色相環上の位置を定義します。基本となる色相を選び、ルールはその後どこから色を取るかを教えてくれます。ルールは彩度や明度を指定しません — これらの次元はあなたが調整するものです。

補色（正反対の色相）

ホイールを挟んで直接向かい合う2色：赤とシアン、オレンジと青、紫と黄。最大のコントラスト。背景から何かを浮かび上がらせたいときに使う — ランディングページのCTAボタン、データチャートのハイライト。

落とし穴：完全な彩度では、補色のペアは不快に振動します。一方を落ち着かせ（彩度を下げる、明るくする、または暗くする）、もう一方をアクセントとして使いましょう。

三色（3色が均等に配置）

120°間隔の3色：赤-黄-青、オレンジ-緑-紫。バランスがとれていてエネルギッシュです。イラスト、子ども向けの商品、圧倒的ではなく活気を持ちたいブランドに人気。

落とし穴：3色すべてが同じ彩度では注目を奪い合います。1色を優位にし（デザインの60%）、1色をサポートし（30%）、1色をアクセント（10%）にしましょう。

類似色（ホイール上の隣同士）

3～5色の隣同士の色相：黄-黄緑-緑またはブルー-青紫-紫。最も落ち着いた調和 — 色同士が争わないため対立がありません。自然シーン（夕焼け、森）はほぼ常に類似色です。

落とし穴：類似色パレットは平坦に見えることがあります。補色のアクセント（中央の色の対面の小さな量）を加えてコントラストポイントを作りましょう。

分割補色（2つの近い補色）

基本となる色を選び、補色そのものではなく、その補色の隣同士の2色を取ります。厳密な補色より柔らかいですがまだパンチがあります。補色が強すぎると感じるデザイナーのための良いデフォルト。

四色（2つの補色ペア）

ホイール上で長方形を形成する4色：例えば赤+緑+オレンジ+青。最も豊かな調和 — 多くの多様性があります — しかし最もバランスを取るのが難しい。1色が優位で他の3色がサポート役のときに最適。

落とし穴：四色パレットは簡単に混乱して見えます。どの色がアイデンティティを担うかを決め、他の3色を小さな役割に格下げしましょう。

単色調和（1つの色相、多くの明度）

1つの色相で彩度と明度を変えたもの。最大の一貫性、ゼロの色相コントラスト。コンテンツ（写真、タイポグラフィ）がUI要素ではなく視覚的な興味を担うインターフェースに完璧。

ほとんどのミニマリストSaaSツールは単色調和です — ブランドは1つの青で、それ以外はグレースケール。

トレンド（ルールを上手に破る）

当社のColor Palette Generatorに含める7番目のモード：ColourLovers、Coolors、およびインダストリーデザイナーから手作業でキュレーションされた177コミュニティパレット。これらのパレットはしばしば古典的なルールを意図的に破ります — 設計者が具体的な創造的意思を持っていたため機能します — そして純粋な理論が安全すぎるものを生成するときのインスピレーションの優れた源。

どれを選ぶ？

• 編集、落ち着き、自然 → 類似色。
• パンチ、CTA、エネルギー → 補色または分割補色。
• 活気あるブランド、イラスト → 三色。
• リッチな編集、大胆なキャンペーン → 四色。
• ミニマリストUI、写真が豊富 → 単色調和。
• 行き詰まった感じ → トレンドを閲覧。

ルールを超えて

7つの調和すべてが2つの重要な次元を無視しています：コントラスト（この背景でテキストを読める？）と意味的な色（赤は理論に関わらず西洋のUIでは危険を意味する）。最終的なパレットを常にWCAGコントラストチェックを通しましょう — Color Palette GeneratorはすべてのペアのAA/AAAレシオを1クリックで表示します — そしてホイールが良く見えるというだけの理由で危険色を選ばないでください。

ルールは開始点であり、終点ではありません。5つのパレットを生成し、批評し、調整してください。優れたパレットは1回のダイスロールからではなく、反復から生まれます。