補色とは｜色相環で見る反対色の関係と、配色で失敗しない使い方

補色とは何か

補色とは、色相環の上で正反対に位置する色どうしのことです。混ぜ合わせると彩度が打ち消し合って無彩色（グレーや白）に近づく関係にあり、逆に隣に並べるとおたがいをもっとも強く引き立てます。

デザインで補色が重宝されるのは、この「引き立て合う」性質のためです。写真の中で目立たせたい被写体の背景に補色を置く、ボタンだけを本文の補色にする、といった使い方をすると、彩度をむやみに上げなくても視線を集められます。

• 並べると引き立つ：もっともコントラストが強く、目を引く組み合わせになる
• 混ぜると濁る：絵の具どうしを混ぜると彩度が落ち、グレーに近づく
• 残像に現れる：ある色を見続けたあとに白い面を見ると、その補色が浮かんで見える

「赤の反対」がシアンだったり緑だったりする理由

補色を調べると、赤の補色をシアン（水色）とする説明と、緑とする説明の両方が出てきます。どちらかが間違っているのではなく、前提にしている色相環が違うだけです。

画面のデザインやアプリでの画像処理を扱うなら、RGB／HSVの色相環を基準にするのが実務的です。色の値を数値で扱えるため、「色相の数値に180を足す（360を超えたら引く）」という単純な計算で補色が求められます。

代表的な補色の組み合わせ

画面で使う前提（RGB／HSV）での代表的な組み合わせです。色相の角度も添えているので、デザインツールのカラーピッカーでそのまま指定できます。

黄と青のように明度差が大きい組み合わせは、小さな文字でも読みやすくなります。逆に赤と緑のように明度が近い組み合わせは、色が判別しにくい人にとって区別が難しく、面積が近いとちらついて見えることもあります。

配色で使うときの3つのコツ

補色は強い組み合わせなので、そのまま半分ずつ使うと落ち着かない画面になります。実際に使うときは、次の3点を押さえると失敗しにくくなります。

1. 1

   面積を大きく偏らせる

   ベース70％・メイン25％・アクセント5％が定番の比率です。補色はアクセントの5％に回し、ボタンやリンクなど「押してほしい場所」だけに使います。

2. 2

   どちらかの彩度か明度を落とす

   純色どうしをぶつけると強すぎます。片方をくすませる、暗くする、あるいは白を混ぜて淡くすると、対比を保ったまま見やすくなります。

3. 3

   間に無彩色を挟む

   境界に白・グレー・黒の線や余白を入れると、輪郭がちらつくハレーションを抑えられます。文字と背景を補色にするときは特に効果的です。

補色2色では強すぎるときは、補色の両隣に位置する2色を使う分裂補色（スプリットコンプリメンタリー）にすると、対比を保ちながら扱いやすくなります。たとえば青に対して、黄の代わりに橙寄りと黄緑寄りの2色を合わせる形です。

やりがちな失敗と直し方

特に注意したいのが、赤と緑の組み合わせだけで意味を分けてしまうケースです。色覚特性によっては区別が難しいため、成功と失敗、必須と任意といった重要な情報は、色に加えて記号や文言でも示すようにします。

補色残像で「反対の色」を体感する

補色の関係は、頭で覚えるより実際に見たほうが早く身につきます。手軽なのが補色残像です。ある色を数十秒見つめてから白い面に視線を移すと、その色の補色が浮かんで見えます。

1. 1

   色を反転した画像を見つめる

   色の残像錯視のツールでは、読み込んだ画像を自動で補色に反転し、その画像を表示してくれます。

2. 2

   白黒画像に切り替える

   20秒ほど見つめたあとに白黒画像へ切り替わると、白黒なのに元の写真に近い色が浮かびます。これが補色の残像です。

3. 3

   元のカラー画像と見比べる

   浮かんで見えた色と本来の色を比べると、反転画像がちょうど補色になっていたことが確認できます。

この現象は、目が同じ色に順応して感度を下げるために起こります。仕組みの詳しい説明と、写真から錯視画像を作る手順は、色の残像錯視の記事にまとめています。長く見つめるほど残像は強くなりますが、そのぶん目も疲れるので、休憩を挟みながら試してください。

よくある質問

補色とは簡単に言うと何ですか？

色相環で正反対に位置する色どうしのことです。混ぜると彩度が打ち消し合って無彩色に近づき、並べるとおたがいをもっとも強く引き立てます。画面のデザインで使うRGBの色相環では、赤とシアン、緑とマゼンタ、青と黄が代表的な組み合わせです。

赤の補色は緑ですか、シアンですか？

どちらの説明も前提が違うだけで正しいものです。絵の具で使われるRYBの色相環では赤の反対は緑、画面表示で使うRGB／HSVの色相環では色相を180度回したシアンになります。Webやアプリのデザインではシアンを基準にすると、カラーピッカーの数値と一致して扱いやすくなります。

補色を使うと画面が派手になりすぎます。どうすればいいですか？

面積を偏らせるのが最も効果的です。ベース70％・メイン25％・アクセント5％を目安に、補色はアクセントの5％だけに使います。それでも強い場合は、片方の彩度や明度を落とす、境界に白やグレーを挟む、補色の代わりにその両隣の色を使う分裂補色に切り替える、といった調整が有効です。

補色残像とは何ですか？

ある色をしばらく見続けたあとに白い面や白黒の画像を見ると、その色の補色が浮かんで見える現象です。見続けた色に反応する細胞の感度が一時的に下がるために起こります。色を反転した画像を見つめてから白黒に切り替えると、白黒なのに元の色が見えるという形で体験できます。