配色を考えるときによく出てくる「補色(ほしょく)」。なんとなく「反対の色」と覚えている人も多いと思いますが、実はどの色を補色と呼ぶかは、使う色のモデルによって少し変わります。
この記事では、補色の基本と、画面の色(RGB)で補色を求める方法、HEXカラーコードから補色を計算する2つのやり方、そして配色に使うときのコツを紹介します。
1. 補色は「色相環で向かい合う色」
色を虹のような順番で円形に並べたものを色相環(しきそうかん)と呼びます。この円の上で、ちょうど反対側(180°の位置)にある2色の組み合わせが補色です。反対色と呼ばれることもあります。
補色どうしは、色み(色相)がもっとも離れた組み合わせなので、並べるとお互いを引き立て合い、強いコントラストが生まれます。
2. 色相環は1つではない
注意したいのは、色相環にはいくつかの種類があることです。
- RGB(光・画面の色)の色相環:赤・緑・青を基本とする並び。赤の反対はシアン、緑の反対はマゼンタ、青の反対は黄になります。
- 絵の具の伝統的な色相環(RYB):赤・黄・青を基本とする美術教育でおなじみの並び。赤の反対は緑、黄の反対は紫、青の反対はオレンジとして教えられることが多い組み合わせです。
- マンセル表色系やPCCSなどの色相環:色の見え方をもとに整理された体系で、向かい合う色の組がまた少しずつ異なります。
どれが正しいというより、目的に合ったモデルを選ぶことが大切です。Webやアプリなど画面上の色を扱うなら、RGBの考え方がそのまま使えます。この記事では以下、RGBで考えます。
3. RGBの補色:足すと白になる組み合わせ
画面の色は、赤・緑・青の光を足し合わせて作られています(加法混色)。RGBでの補色は、足し合わせると白(255, 255, 255)になる色と考えるとわかりやすくなります。
| 色 | 元の色 | 補色 | 補色の色 |
|---|---|---|---|
#FF0000 赤 | #00FFFF シアン | ||
#00FF00 緑 | #FF00FF マゼンタ | ||
#0000FF 青 | #FFFF00 黄 |
赤(255, 0, 0)とシアン(0, 255, 255)を足すと、ちょうど(255, 255, 255)の白になります。ほかの組も同じです。
4. カラーコードから補色を計算する2つの方法
HEXカラーコードの読み方に不安がある場合は、先にカラーコード(HEX)の読み方を読んでおくとスムーズです。ここでは例として、山吹色の #E8A33D(R=232, G=163, B=61)の補色を求めてみます。
方法A:255から引く(色の反転)
R・G・Bのそれぞれを255から引きます。HEXなら FF から各2桁を引くのと同じです。
- R:255 − 232 = 23 →
17 - G:255 − 163 = 92 →
5C - B:255 − 61 = 194 →
C2
答えは #175CC2 。元の色と足すと白になる、定義どおりの補色です。
ただしこの方法では、明るさも反転します。明るい色の補色は暗めに、暗い色の補色は明るめになるので、元の色と並べたときに「同じトーンの反対色」にはなりません。
方法B:最大値+最小値から引く(明るさを保つ)
同じ明るさのまま色みだけを反対側に回したいときは、R・G・Bのうち最大値と最小値を足し、その合計から各値を引きます。
- 最大値 232(R)+ 最小値 61(B)= 293
- R:293 − 232 = 61 →
3D - G:293 − 163 = 130 →
82 - B:293 − 61 = 232 →
E8
答えは #3D82E8 。これは、HSL(色相・彩度・明度)で表したときに色相だけを180°回し、彩度と明度はそのままにした色と同じ結果になります。デザインツールで「色相を180°回す」操作をしたときの色に相当します。
| 元の色 | 方法A(反転) | 方法B(明るさを保つ) |
|---|---|---|
#E8A33D | #175CC2 | #3D82E8 |
#A08CC8 | #5F7337 | #B4C88C |
#336699 | #CC9966 | #996633 |
ラベンダーの #A08CC8 は、方法Aだとくすんだオリーブ色、方法Bだとやわらかい黄緑になります。配色に使うなら方法B、数学的にぴったり反対の色が欲しいなら方法A、と使い分けるのがおすすめです。
5. 補色を配色に使うときのコツ
補色はコントラストが強いぶん、使い方しだいで「目を引く」にも「落ち着かない」にもなります。
面積に差をつける
2色を同じ面積で並べると、どちらも主張して落ち着きません。片方をベース、もう片方を小さなアクセント(ボタンやアイコン、見出しの一部など)にすると、まとまりやすくなります。
鮮やかさや明るさを変える
鮮やかな補色どうしを隣り合わせると、境目がちらついて見えることがあります。どちらかの彩度を下げる、明るさに差をつける、間に白やグレーをはさむ、といった工夫で見やすくなります。
文字と背景の組み合わせは慎重に
色相が反対でも、明るさが近いと文字は読みにくくなります。文字と背景には、色みよりも明るさの差をしっかりつけることを優先しましょう。
色だけで情報を伝えない
色の見え方には個人差があり、たとえば赤と緑の組み合わせを見分けにくい人もいます。大事な情報は、色に加えて明るさの差、形、文字、アイコンなどでも区別できるようにしておくと安心です。
補色の「となり」を使う
補色そのものではなく、補色の両どなりの2色を組み合わせる方法(スプリット・コンプリメンタリー)もあります。補色ほど強くぶつからず、それでいてメリハリのある配色にしやすいのが特長です。
6. 補色にまつわる身近な現象
ひとつの色をしばらく見つめたあと白い壁に目を移すと、うっすら別の色が見えることがあります。これは「残像」と呼ばれる現象で、元の色の補色に近い色が見えやすいことが知られています。補色は、デザインの理論だけでなく、私たちの目の仕組みとも関係が深い考え方なのです。
まとめ
- 補色は、色相環で向かい合う(180°反対の)色
- 色相環にはRGB・絵の具(RYB)・マンセルなど複数あり、組み合わせが少し違う
- RGBの補色は「足すと白になる色」。255から各値を引けば求められる
- 明るさを保ちたいときは「最大値+最小値」から各値を引く
- 配色では、面積の差・彩度や明るさの差をつけ、色だけに頼らない工夫を