配色を考える際に役立つのが「色相環」です。色相環を見ると、色同士が近いのか、離れているのか、反対側にあるのかを確認でき、目的に合う組み合わせを考えやすくなります。
この記事では、赤・黄・緑・青などの代表的な色相を使い、色相環の基本的な見方を解説します。配色では色相の位置関係だけでなく、明度（明るさ）や彩度（鮮やかさ）も考慮することが重要です。
本記事は、色彩士とカラーコーディネーター資格を持つスタッフが監修・精査しています。
色相環の使い方は、①基準色を決める、②色相環上の位置関係から組み合わせる色を選ぶ、③明度・彩度・使用面積を調整する、という順番で考えると分かりやすくなります。
配色は用途や見る人、表示・印刷条件によっても適切な組み合わせが変わります。ここでは「色相環とは何か」「配色にどう使うか」を、12色相の図と具体例を使って簡潔に紹介します。
色相環とは？配色に役立つ基本知識
色は一般に、「色相（色み）」・「明度（明るさ）」・「彩度（鮮やかさ）」の3つの属性で表します。この記事では、主に色相の関係と、配色するときに一緒に確認したい明度について解説します。
色を構成する3つの属性
- 色相（色味）
- 明度（明るさ）
- 彩度（鮮やかさ）
ディスプレイのRGBと印刷のCMYKでは、色をつくる仕組みが異なります。詳しくは「色の三原色 光と色料（RGBとCMYK）の原色」で解説しています。
色相環は、赤・黄・緑・青などの色相を、色みの変化に沿って円形に並べた図です。色相環の色数や区切り方は表色系によって異なります。この記事では、色同士の位置関係を把握しやすい12色相の図を使用します。
例えば、PCCS（日本色研配色体系）では、配色を規則的に選びやすい24色相の色相環を使用します。マンセル表色系など、ほかの表色系では色相の区切り方や記号が異なります。なお、白・グレー・黒などの無彩色には色相と彩度がなく、明度だけがあります。
12色相を円形に並べた色相環
この図では、説明しやすいように【黄】を最上部に配置しています。色相環は回転させても隣り合う色や反対側にある色の関係は変わらないため、資料によって黄色の位置が異なる場合があります。
黄色を右に配置した場合
同じ色相環を回転させ、黄色を右側、赤橙を最上部に配置した例です。色相の並び順と位置関係は変わりません。
【黄】を基準に補色・反対色・近似色を見る
色相環では、基準色に対して反対側にある色、近くにある色を視覚的に確認できます。ここでは【黄】を基準にして、補色・反対色・近似色の位置関係を見ていきます。
正反対にある色が「補色」
この12色相環では【黄】の正反対に【紫】があります。この関係が補色で、【黄】の補色は【紫】です。使用する色相環によって色の区切り方が異なるため、厳密な色指定では同じ表色系の色票や数値を使って確認します。
補色の周辺にある「反対色」
「反対色」は資料によって補色と同じ意味で使われることもあります。この記事の図では、補色とその両隣にある対照的な色相をまとめて反対色としています。【黄】を基準にすると、【紫】とその周辺の【赤紫】【青紫】です。
隣り合う色が「近似色」
【黄】の両隣にある【黄橙】と【黄緑】が近似色です。色相が近いため共通する色みを持ち、まとまりのある配色をつくりやすくなります。
色相による明るさの違いも考慮する
同じように鮮やかに見える色でも、色相によって感じられる明るさには違いがあります。配色では色相の位置関係だけでなく、明度差が十分にあるかも確認します。
色ごとの明るさを知る
色相による明るさの違いを確認しやすくするため、この記事で使用している色相環をグレースケール化しました。カラー表示と並べて見ると、黄色付近は明るく、青紫付近は暗く表示されることが分かります。
ただし、これはこの図で指定した色を同じ条件で変換した結果です。実際の明度は、色の数値、彩度、表示機器、照明、印刷条件などでも変わります。色相環の上下位置だけで、すべての色の明暗が決まるわけではありません。
黄色を右に配置した図でも明度差は同じ
色相が違えば、同じように鮮やかな色でも明るさが同じとは限りません。文字や重要な情報では、色相差だけに頼らず明度差も確認します。
補色と近似色の組み合わせ例
ここからは「補色」と「近似色」の組み合わせを、黄色と赤橙を基準に比較します。色相関係に加えて、明度差による見え方の違いも確認します。
配色の印象は、組み合わせる色だけでなく、それぞれの色が占める面積にも左右されます。図では面積比を変えた例とグレースケール表示も並べています。
【黄】と補色・近似色の組み合わせ
この図の【黄】と【紫】は補色で、明度差も大きいため、互いを強く目立たせる組み合わせになります。【黄橙】や【黄緑】などの近似色は共通する色みを持つため、補色よりもまとまりをつくりやすい配色です。
【赤橙】と補色・近似色の組み合わせ
この図の【赤橙】と補色は明度差が小さく、同じ面積で隣り合わせると境界がちらつくように感じる場合があります。片方の面積を小さくするほか、明度・彩度を調整したり、色の間に余白や境界線を設けたりすると見分けやすくなります。
近似色同士はまとまりをつくりやすい一方、明度も近いと遠くから違いを認識しづらくなります。文字、案内表示、重要な情報など、はっきり区別する必要がある部分では十分な明度差を設けます。
色相環を使った配色方法のまとめ
- 最初に基準色を決め、色相環上の位置関係から組み合わせる色を選ぶ。
- 近似色はまとまりをつくりやすく、補色や反対色は変化や強調をつくりやすい。
- 色相の関係と明度差は別々に確認する。
- 強く目立たせたい色は、使用面積を絞ってアクセントとして利用できる。
- 補色同士が見づらい場合は、面積比、明度、彩度、余白、境界線で調整する。
- 文字や重要情報は、色の違いだけに頼らず読みやすさを確認する。
配色をより効果的に行うためには、PANTONEやDICなどのカラーガイドを活用すると便利です。
画面や印刷物で色を正確に共有したい場合は、PANTONEやDICなど、用途に合った色見本帳を使って現物の色を確認します。
PANTONEの色番号や見本帳の確認方法は「色見本帳「PANTONE」フォーミュラガイドの使い方」でも紹介しています。
