補色と類似色の使い方――違いと組み合わせ方

基準色をひとつ決めた後、「目立つ色を足したい」「自然につながる色を増やしたい」と考えることがあります。前者の出発点になるのが補色、後者に向いているのが類似色です。どちらも色相環上の位置から候補を探す方法ですが、見た目の強さと使いやすい場面は異なります。本記事では、それぞれの違い、向いている用途、組み合わせ方、HueRollでの探し方を説明します。

HueRollでこの例を試す

HueRollのカラーパレットで色を1つ選び、「色の詳細」を開きます。
HEXの入力欄に#2563EBを入れ、「適用」を押します。
「補色」と「類似色」を見比べます。候補のコードだけを控えるときは「コピー」を使うと、基準の青を変えずに比較できます。

色相環を地図として使う

色相環は、赤、黄、緑、青、紫などの色相を円状に並べたものです。円の中でどれくらい離れているかを見ると、基準色に近い候補や、大きく異なる候補を一定のルールで探せます。補色と類似色は、この位置関係に名前を付けたものです。

ただし、色相環上の距離だけで完成した配色が決まるわけではありません。彩度、明度、面積、周囲の色、文字とのコントラストによって印象は変わります。色相環は答えそのものではなく、比較する候補を見つけるための地図として使います。

補色とは

補色は、色相環で基準色の反対側にある色です。HueRollでは、選択色をHSLへ変換し、彩度と明度を保ったまま色相を180度回転させた色を表示します。青に対する黄やオレンジ系、赤に対するシアン系のように、元の色と大きく異なる候補が現れます。

補色は差が強いため、主要ボタン、キャンペーンの見出し、グラフで強調したい系列、イラストの視線を集めたい部分などに向いています。基準色を広く使い、補色を小さく使うと、どこが重要かを示しやすくなります。白、黒、グレー、淡いティントなどの落ち着いた色を間に入れると、ふたつの強い色が競い合うのを抑えられます。

類似色とは

類似色は、色相環で基準色の近くにある色です。青から青緑や青紫へ、オレンジから赤橙や黄色へ移るような、連続性のある組み合わせを作れます。色の変化が穏やかなので、背景のセクション、グラデーション、イラスト、複数のカードなどへ統一感を持たせたいときに向いています。

一方、類似色は互いに近いため、重要な違いを伝える用途では見分けにくくなることがあります。成功と失敗、選択中と未選択、本文とリンクなどを色相の小さな違いだけで表さないでください。明度差、枠線、形、アイコン、文字ラベルなども一緒に使います。

補色と類似色の違い

比較	補色	類似色
色相環上の位置	基準色の反対側	基準色の近く
印象	差が強く、目を引きやすい	連続性があり、まとまりやすい
向いている用途	アクセント、主要操作、強調	背景、セクション、グラデーション
注意点	使う面積が大きいと競い合いやすい	重要な要素の区別が弱くなりやすい
合わせやすい色	白、黒、グレー、元の色のティント	無彩色、元の色のティントとシェード

HueRollではどのように計算するか

HueRollの「補色」は、選択色から色相を180度動かした1色です。「類似色」には、選択色から左右へ15度、30度、45度、60度動かした合計8色を表示します。「類似配色」には、基準色を含め、左右へ30度と60度動かした合計5色を表示します。

これはHueRollが候補を一貫して生成するために採用している角度です。すべての色彩理論やデザインツールが同じ角度を使うとは限りません。また、HSLでは同じ明度の数値でも色相によって見た目の明るさが異なることがあります。生成された候補は画面で比較し、必要に応じて彩度や明度を調整してください。

候補の色見本を選ぶと、その色が現在の色になり、パネル全体が再計算されます。選択済みの色見本には現在の色と表示されます。HEXコードだけを使いたい場合は、色見本とは別のコピーを押します。コピーしても現在の色は変わりません。

青を基準にした例

#2563EBを選ぶと、HueRollの補色は#EBAD25になります。青をページやブランドの基準色として使い、黄橙色を主要ボタンや小さな強調へ使うと、はっきりした差を作れます。どちらも鮮やかに感じる場合は、背景へ青のティント#D3E0FBを使い、元の青と補色の面積を小さくすると落ち着きます。

同じ青の類似色には、シアン寄りの#25C6EBや紫寄りの#4A25EBなどが含まれます。青を中心に、青緑を情報セクション、青紫を装飾へ使うと、色相に変化を付けながら一体感を保ちやすくなります。ただし、文字や操作状態を区別する場合は、それぞれの色の明度とコントラストも調整します。

例に使った色を見比べる

HueRollでの役割	色見本・HEX
基準の青	#2563EB
補色	#EBAD25
背景候補のティント	#D3E0FB
シアン寄りの類似色	#25C6EB
紫寄りの類似色	#4A25EB

補色を使う手順

基準色をHueRollで選び、補色を確認します。
基準色と補色のどちらを主役にするか決めます。
もう一方は、ボタン、バッジ、グラフの強調など、小さな範囲へ置きます。
強すぎる場合はティントを使うか、彩度と明度を調整します。
文字を置く色はコピーではなく色見本本体を選び、白と黒のコントラスト比を確認します。

類似色を使う手順

基準色を選び、類似色または類似配色を表示します。
基準色に近い候補から、役割を説明できる2～3色に絞ります。
ひとつを背景や広い面、ひとつを補助、ひとつをアクセントへ仮に割り当てます。
違いが弱い場合は、色相をさらに増やす前にティントとシェードで明暗差を付けます。
重要な状態には文字やアイコンを加え、色だけに意味を持たせないようにします。

補色と類似色を一緒に使う

どちらか一方だけを選ぶ必要はありません。基準色と類似色でページ全体のまとまりを作り、補色を主要な操作へ少量だけ使う方法があります。たとえば、青と青緑で背景やセクションを構成し、黄橙色をひとつの主要ボタンだけに使います。この考え方は、穏やかな全体像と明確な注目点を両立させたいときに役立ちます。

補色と類似色は、完成した配色を自動的に決める答えではありません。HueRollで候補を見つけ、役割と面積を決め、必要な調整を行い、最後に実際の画面で確認するための出発点です。強く目立たせたいなら補色、自然につなげたいなら類似色という基本から始めると、目的に合う色を選びやすくなります。

候補を選んだ後に確認すること

色の役割と面積を決めるときは60–30–10のガイド、文字を載せるときはコントラストのガイドへ進めます。色を調整したい場合は、HueRollで基準色を選び直して候補を比較してください。