補色配色とは?強いコントラストで目立たせる配色方法を解説

セールバナーや広告で、思わず目を引く強いコントラストの配色を見たことはないでしょうか。そうした配色の多くは「補色配色」という考え方で作られています。

この記事では、補色配色とは何か、そしてこの配色を上手に使うための調整のコツを、初心者向けに解説します。

基本の理解

まずは補色配色の定義と、なぜ強いコントラストが生まれるのかを押さえましょう。

補色配色とは何か

補色配色とは、色相環の中で正反対に位置する補色同士を組み合わせる配色方法のことです。色相環とは、赤・橙・黄・緑・青・紫といった色み(色相)を、変化の順番通りに円形に並べた図のこと。この円の上で向かい合う、最も離れた位置にある色同士の関係を「補色」と呼びます。

下の12色の色相環で見ると、時計の12時の位置にある赤と、6時の位置にある緑が補色の関係です。同じように、2時の橙と8時の青、4時の黄と10時の紫も、それぞれ向かい合う補色のペアになっています。

赤(12時) ⇔ 緑(6時)

橙(2時) ⇔ 青(8時)

黄(4時) ⇔ 紫(10時)

デザインの配色で一般的に使われる12色相環のイメージ。点線は赤と緑の補色関係

なお、色相環にはいくつか種類があり、画面の光(RGB)をもとにした色相環では、赤の反対がシアン(水色)になるなど、補色の組み合わせが少し変わります。この記事では、デザインの配色でよく使われる「赤と緑が向かい合う」色相環をもとに説明しています。色相環の種類については色相環とは?で解説しています。

なぜ補色同士は引き立て合うのか

補色同士はお互いの色を引き立て合うため、強いコントラスト(色同士の差の大きさ)と高い視認性を生み出せます。

その背景には、人の目の性質があります。たとえば赤い色をしばらく見つめたあとに白い壁を見ると、うっすら緑っぽい色が見えることがあります。これは「補色残像」と呼ばれる現象で、目はある色を見ると、その反対の色(補色)を感じやすい状態になっているのです。そのため補色同士を並べると、お互いの鮮やかさがより強調されて見えます(これを「補色対比」と呼びます)。

この性質のおかげで、補色配色はユーザーの視線を強く引きつけられ、目立たせたい場面で効果を発揮します。

補色配色をどう使うか

配色方法を選ぶときは、まず目的をはっきりさせましょう。全体をまとめて統一感を出したいときは類似色配色、特定の要素を目立たせたいときは補色配色、と使い分けるのが基本です。

	類似色配色	補色配色
組み合わせる色	色相環で隣り合う色	色相環で正反対の色
印象	統一感・落ち着き	メリハリ・インパクト
向いている場面	サイト全体の雰囲気づくり	ボタンやセール情報など、目立たせたい要素

類似色配色については類似色配色とは?で解説しています。広告・バナー・アイキャッチなど瞬時に注目を集めたい場面や、ボタン・重要な情報を周囲から明確に区別したい場面で、補色配色が活躍します。

実際の使い方としては、セールバナーで背景を寒色系(青など、涼しさを感じさせる色)にし、CTAボタン(申し込み・購入など、ユーザーに取ってほしい行動を促すボタン)をその補色である暖色系(オレンジなど、暖かさを感じさせる色)にして強く目立たせる、といった例があります。

ポイントは面積の差です。補色同士を同じ面積・同じ鮮やかさで使うと刺激が強くなりすぎるため、どちらか一方をメインカラー(画面の主役として広く使う色)、もう一方を少ない面積のアクセントカラー(強調のために少量だけ使う色)として使うのが基本です。目安として、配色の基本比率「ベースカラー70%・メインカラー25%・アクセントカラー5%」のアクセント部分に補色を当てはめると、画面全体が青でも、オレンジのボタンはほんの数%の面積、というイメージになります(比率の考え方は色の割合とは?で解説しています)。

今すぐ申し込む

左:青とオレンジを半分ずつ(刺激が強く、どちらが主役か分からない)/右:青を広く、オレンジはボタンだけ(ボタンが際立つ)

彩度(色の鮮やかさ)を少し落とす、明度(色の明るさ)に差をつけるなどの調整も、補色特有の強すぎる印象を和らげるのに役立ちます。

実践のポイント

補色配色を使うときの注意点と、よくある疑問をまとめます。

注意点・よくある間違い

補色同士を同じ比率・同じ鮮やかさで使ってしまうと、目がチカチカするような見づらい配色になります。必ずどちらかをメイン、もう一方をアクセントとして面積に差をつけましょう。
「目立つから」という理由だけで安易に補色配色を選び、サービスの落ち着いたブランドカラー(企業やサービスを象徴する色として一貫して使う色)のイメージと矛盾してしまうことがあります。目立たせたい理由と、伝えたい世界観が合っているか確認しましょう。

境目のチカチカ(ハレーション)を防ぐ方法

鮮やかな補色同士が直接接すると、境目がチラチラして見える「ハレーション」が起こります。たとえば赤い背景に緑の文字を書くと、文字の輪郭が揺れて見えて、とても読みにくくなります。

これを防ぐ定番のテクニックが、2色の間に白・黒・グレーなどの無彩色を挟む方法です。文字の周りに白いフチ取りを入れたり、色の境目に白い線を入れたりするだけで、見やすさが大きく変わります。このように、ぶつかり合う色の間に別の色を挟んで分離する手法は「セパレーション」と呼ばれます。

SALE 50%OFF

左:赤と緑が直接接してチカチカする/右:白いフチ取り・白い線(無彩色)を挟んで見やすくした例

ただし、フチ取りで見やすくなっても、赤×緑の文字は色の見分けが難しい人にとって読みにくい組み合わせのままです。本文や重要な情報には、補色同士の文字色と背景色の組み合わせを避けるのが無難です(色だけに頼らないデザインとは?もあわせて参考にしてください)。

補色を簡単に見つける方法

「自分が使いたい色の補色は何色?」と迷ったら、ツールに計算してもらうのが確実です。

Adobe Color:無料のWebツール。カラーホイールで基準の色を選び、配色ルールで「補色」を選ぶと、反対側の色を自動で表示してくれます(使い方は補色とは?でも紹介しています)
CSSで計算する:Webサイトを作っている場合、色相を角度で表すhsl()なら、色相の値に180を足すと反対側の色になります

/* hsl(色相 彩度 明度) — 色相の値に180を足すと反対側の色になる */
.base   { background: hsl(210 80% 45%); } /* 青 */
.accent { background: hsl(30 80% 45%); }  /* 210 + 180 = 390 → 30(オレンジ) */

なお、CSSのhsl()は画面の光(RGB)をもとにした色相環なので、先ほど触れたように、赤(0)の反対はシアン(180)になります。ツールによって基準にしている色相環が異なるため、提示される補色が少しずれることがありますが、「だいたい反対側の色」を探す目安として使えば十分です。

よくある質問

Q. 補色配色は何色まで使っていい?
A. 基本は補色の2色に、無彩色(白・黒・グレーのように色みを持たない色)を加えた3色程度が扱いやすいです。色数が増えるほどコントラストの調整が難しくなります。
Q. 補色配色が強すぎると感じたときの対処法は?
A. どちらかの色の彩度を下げてくすませる、面積比を大きく変える(補色側を1割程度まで小さくする)、間に無彩色を挟む(セパレーション)といった方法で、印象を和らげられます。