補色とは?反対の色を組み合わせる配色の基本

COLOR GUIDE

補色とは?反対の色を組み合わせる配色の基本

補色は、色相環で向かい合う関係にある色です。並べると互いを強く見せる高いコントラストが生まれますが、RGB・印刷・絵具など採用する色体系によって具体的な補色関係は変わります。

資料・研究ベース

補色の具体的な組み合わせは採用する色体系で異なります。また補色関係とWCAG等の可読性基準は別問題です。

補色は、配色を学ぶと必ず出てくる基本用語です。「反対の色」と説明されますが、何を反対とするかは色体系によって少し違います。まずは色相環上の関係として理解すると分かりやすいでしょう。

補色とは

National Gallery, Londonは、補色を互いに最大のコントラストを持つ色として説明し、絵画の基本的な組み合わせとして赤と緑、黄と紫、青と橙を挙げています。色相環では補色同士が向かい合う位置に置かれます。

隣り合わせると両方の色がより鮮やかに感じられやすく、視線を引きつける配色になります。

補色をそのまま使うと強すぎることもある

高彩度の補色を同じ面積で並べると、強いコントラストで落ち着かない印象になる場合があります。片方をベースにして、もう片方をアクセントにする、彩度を下げる、明度差をつけると扱いやすくなります。

「補色だからおしゃれ」ではなく、面積比とトーンまで設計することが重要です。

RGB・CMY・伝統的色相環で関係が違う

絵具の教育で使う伝統的な色相環と、ディスプレイのRGB、印刷のCMY/CMYKでは原色の考え方が違います。そのため、厳密な意味での補色ペアも体系によって変わります。

Webデザインでは、見た目だけでなく文字と背景のコントラスト比も別に確認する必要があります。補色関係だから文字が読みやすいとは限りません。

代表的な補色ペアを試す

  • 赤 × 緑:強い対比。彩度を下げると落ち着く
  • 青 × 橙:寒色と暖色の対比を作りやすい
  • 黄 × 紫:明度差が大きくなりやすい組み合わせ

補色とアクセシビリティは別に確認する

補色は色相の対比が強い一方、文字の読みやすさは主に明るさの差にも左右されます。赤と緑のように色相差が大きくても、明度が近いと文字と背景の判別が難しい場合があります。

また、赤と緑の組み合わせは一部の色覚特性では区別しにくいことがあります。グラフや警告表示では、色だけで分類せず模様、形、ラベルを併用することが重要です。

配色ツールで補色を出した後は、実際の使用サイズでコントラスト比や識別性を確認するところまでを一つの工程にすると、見た目と使いやすさを両立できます。

補色は「目立たせる」だけでなくバランスにも使える

補色同士は色相差が大きいため、並べると互いが強く見えやすい組み合わせです。ただし面積を半分ずつにする必要はありません。一方を主役、もう一方を小さなアクセントにすると、強い対比を保ちながらまとまりを作れます。

また、補色関係でも明度が近すぎると文字が読みにくい場合があります。色相の反対関係とアクセシビリティ上のコントラスト比は別の指標です。Webや資料では、見た目の鮮やかさだけでなく文字の読みやすさを数値でも確認する必要があります。

RELATED COLORS

このテーマに関係する色

出典・確認情報

情報確認日2026-09-13

補色の定義、代表的なペア、並置による相互強調を確認。