補色とは？色相環で配色を決める方法：補色・類似色・トライアド
この記事はAIの支援を受けて原文を翻訳したものです。専門用語や数式は原文とあわせて確認してください。
補色とは、色相環で真正面（180°）に向かい合う2色のことで、色相の対比がもっとも強くなる組み合わせです。ただし「真正面」にくる色は色相環の種類によって変わり、絵の具の混色をもとにしたRYB色相環では赤の補色は緑、画面やCSSで使うRGB/HSL色相環では赤（0°）の補色はシアン（180°）になります。補色を派手にしすぎないコツは、片方を広い面の主役に、もう片方を小さなアクセントにとどめ、文字の読みやすさは別に確認することです。
補色とは？向かい合う2色が生む効果
色相環は、色合い（色相）をぐるりと円に並べたもので、2色の色相がどれだけ離れているかが一目でわかります。補色は、その距離がいちばん大きくなる関係です。この距離には2つの効果があります。1つは、2色を隣り合わせに置くとお互いを引き立て合い、どちらも鮮やかに見えること。青い背景のページに置いたオレンジ色のボタンが目立つのはこのためです。もう1つは、混ぜ合わせると無彩色に近づく性質で、絵の具なら灰色に、光なら白になります。
この強い緊張感は、補色の配色が「うるさい」仕上がりになりやすい理由でもあります。彩度の高い反対色を同じ面積で使うと、どちらも主張し合って目が疲れます。明るさまで近いと、境目がチカチカして見える（いわゆるハレーション）こともあります。対策は、片方に主役を任せることと、色相だけでなく明度や彩度にも差をつけることです。
RYBとRGBで補色が違う？色相環が2通りある理由
色相環は1種類ではありません。絵の具の混色をもとにした伝統的なRYB色相環は、赤・黄・青の絵の具の原色が基準です。一方、画面やCSS、HSL/HSBのカラーピッカーの裏側にあるRGB色相環は、光の赤・緑・青が基準で、CSSでは赤が0°、黄が60°、緑が120°、シアンが180°、青が240°、マゼンタが300°の位置にあります。色の並びと間隔が違うので、「真正面」に来る色も変わるのです。
| 色 | RYB色相環（絵の具）での反対色 | RGB/HSL色相環（画面）での反対色 |
|---|---|---|
| 赤 | 緑 | シアン（180°） |
| 黄 | 紫 | 青（240°） |
| 青 | オレンジ | 黄（60°） |
| 緑 | 赤 | マゼンタ（300°） |
| オレンジ | 青 | アジュール（明るい青、210°） |
色の体系によっても答えは変わります。10色相のマンセル色相環では、赤の反対側は青緑です。どの色相環が間違いということはなく、素材と目的が違うだけです。絵の具を混ぜるならRYB、画面で色を選ぶならRGB/HSLの色相環を使う、と整理しておくと迷いません。
ツールによっても違いがあります。Adobe Colorのコミュニティフォーラムでは、Adobe社員が、Adobe Colorの配色ルールはRYB色相環をもとにしていると回答しています。一方、CSSのhsl()で色相に180を足す方法は、RGB色相環の計算です。さらに、LCHやOKLCHのような知覚ベースの色空間では、色相の角度がまた別の位置になります。MDNによると、sRGBの緑はsRGBでは色相120°ですが、CIELABでは約134°です。同じ「+180°」でも、色空間ごとに少しずつ違う相手になります。
配色の基本5ルールと色相環の角度
補色は、古典的な配色ルールの1つにすぎません。ほかのルールも、色相の角度があらかじめ決まっているパターンです。以下では、RGB/HSL色相環の赤（0°）を基準色にしています。分裂補色や類似色の開き具合は慣例で、多くのパレットツールでは広げたり狭めたりできます。
| ルール | 色相の位置（基準0°） | 印象 | 向いている用途 |
|---|---|---|---|
| 補色 | 0°、180° | 色相の対比が最大。同じ分量だと緊張感が強い | 1か所だけ目立たせたいアクセント |
| スプリット・コンプリメンタリー（分裂補色） | 0°、150°、210° | 強い対比で、緊張感は控えめ | 対比を出したい初心者 |
| 類似色（アナログ） | 330°、0°、30° | 穏やかでまとまりがあるが、対比は小さい | 背景、イラスト、雰囲気づくり |
| トライアド（三角配色） | 0°、120°、240° | にぎやかでバランスが良い | 楽しい雰囲気のデザイン、3つのグループの区別 |
| テトラード（四角配色・正方形） | 0°、90°、180°、270° | 最も表情豊かだが、バランスを取るのが最も難しい | 大きなレイアウト、経験を積んだデザイナー |
テトラードは長方形にすることもできます。等間隔ではない補色ペアを2組使う方法で、たとえば0°、60°、180°、240°です。MDNのパレット生成の例も同じ考え方で、基準の色相に180°、±120°、90°刻みの角度を足して、補色・トライアド・テトラードのパレットを作っています。
補色を派手にしすぎない使い方
失敗しにくい配色は、色ごとに役割を持たせるところから生まれます。最初の目安としてよく使われるのが60-30-10の法則です。全体の面積のおよそ60%を主役のベースカラー、30%を補助のサブカラー、10%をアクセントカラーにします。インテリアの世界から借りてきた経験則であり、法則と呼ばれていても決まりではありません。デザイナーも数字は出発点として扱っています。日本語の配色解説では、ベース70%・サブ（アソート）25%・アクセント5%の「70:25:5」という比率もよく紹介されますが、これも同じく目安です。
- 基準色を決める。伝えたい内容、写真、ブランドカラーなどから選びます。
- 配色ルールを選ぶ。色相環から相手の色相を読み取ります。
- 役割を割り当てる。基準色を淡く（または落ち着いた色に）してベースの背景に、濃い色をヘッダーやパネルのサブに使い、補色は目を引きたい10%、たとえばボタン1つに残します。
- 明度と彩度に差をつける。ベースを控えめにしておくと、彩度の高いアクセントが張り合わずに目立ちます。
- コントラストを確認する。仕上げる前に、文字と背景のすべての組み合わせをチェックします。
図3の配色は、例として作ったものです。同じカードレイアウトを3つの配色に当てはめてあり、どれも、明るいベースの背景、濃いサブの見出し、小さなアクセントという構成です。強い色同士が同じ場所を取り合わないので、補色でもうるさくなりません。
コントラストとアクセシビリティ：色相の差と読みやすさは別物
反対の色相でも、明るさ（明度）がほとんど同じになることがあります。文字の読みやすさを決めるのは、色相の差ではなく明るさの差です。WCAG 2はこれをコントラスト比 (L1 + 0.05) / (L2 + 0.05) で測ります。L1とL2は、明るいほうと暗いほうの色の相対輝度です。結果は1:1から21:1の範囲になり、色相は計算の主な要素ではありません。達成基準1.4.3（レベルAA）では、通常の文字に4.5:1以上、大きな文字（18pt、または太字の14pt）に3:1以上が求められます。さらに達成基準1.4.11では、ユーザーインターフェース部品や意味を持つグラフィックスに、隣り合う色との比で3:1以上が必要です。
定番の組み合わせで計算すると、問題がはっきり見えます。純色の赤（#FF0000）を緑（#009900）の上に置くと1.06:1で、グレースケールにするとほぼ同じ灰色になってしまいます。オレンジ（#F97316）と青（#2563EB）は1.84:1。赤とシアン（#00FFFF）は3.19:1で、大きな文字にしか使えません。一方、紺（#1E3A8A）とピーチ色（#FFEDD5）は9.04:1で基準を満たします。補色の色相は図形やアクセントに使い、本文の文字色には、とても濃い色かとても薄い色を選びましょう。
色相環配色でよくある失敗
- 彩度の高い反対色を同じ面積で使う。片方を主役にして、もう片方は小さくします。
- 反対の色相なら読めると思い込む。文字と背景のすべての組み合わせで4.5:1以上かを確認します。
- 色相環を取り違える。RYB色相環で描かれた配色図は、HSLピッカーで180°離れた色とは一致しません。
- 色だけで情報を伝える。WCAGの達成基準1.4.1は、色を情報を伝える唯一の視覚的手段にしないよう求めています。赤と緑が区別しにくい色覚は、色覚の特性として最も多いタイプなので、ラベルやアイコン、パターンを添えましょう。
- 60-30-10を公式のように扱う。役割の上下関係をつけるために使い、最後は目で見て調整します。
よくある質問
青の補色は何色ですか？
絵の具のRYB色相環ではオレンジです。RGB/HSL色相環では、240°の純色の青は60°の黄と向かい合います。
カラーコードから補色を求めるにはどうしますか？
色をHSLに変換し、彩度と明度はそのままで、色相に180を足します。hsl(30 100% 50%)のオレンジはhsl(210 100% 50%)の明るい青（アジュール）になります。足した結果が360以上になるときは、360を引きます（240なら240+180−360で60）。RGBの各値を255から引く「反転」でも反対の色相になりますが、明るさまで反転するため、濃い紺が明るい黄土色に変わるなど、印象が大きく変わります。
補色とコントラストは同じ意味ですか？
少し違います。補色は色相の差が最大の関係で、読みやすさに効くコントラストは明るさの差で決まります。RGB色相環では、濃い青と淡い黄は補色であり、コントラストも高い組み合わせです。一方、RYB色相環の純色の赤と中間の緑は補色ですが、明るさはほぼ同じです。
補色どうしを混ぜるとどうなりますか？
絵の具では灰色に近づき、光では白になります。この「混ぜると無彩色になる」性質が補色の定義の1つです。ただし色相環の描き方によって補色の組み合わせは一通りではないため、色相環ごとの違いを知っておくと混乱しません。
出典：MDN Web Docs「<hue>」（CSS）、MDN Web Docs「相対色の使用」（パレットの例）、WAIC（W3C WAI）「WCAG 2.2 解説書 達成基準 1.4.3: コントラスト (最低限)」、Adobe「補色のガイド」（英語）
関連記事
本文の理解を助けるために制作したオリジナルイラストです。