色相環とトーンマップから考える配色、補色や反対色の解説や実例紹介

色相環とは、色相を環状に配置したもので、異なる色相同士の相対的な関係性を理解するのに役立ちます。現在最も広く利用されている色相環は、マンセル色相環と呼ばれるもので、赤・黄・緑・青・紫の5色とその間を埋める色の全20色相で構成されています。この環状に配置された色の中から、基準となる色を一つ選択し、その色からの相対的な位置関係をもとにさまざまな種類の配色を得ることができます。

人間の目は、800万〜1000万の異なる色を識別できると言われており、わずかな色の違いによっても人に与える印象は変わります。そのため、デザイナーにとって配色を決定することは常に難しい課題です。色相環を使った色の関係性や、それぞれの色の特徴を学ぶことで、デザインによって解決したい課題に対して論理的なアプローチを行うことができるようになります。これによって、配色の検討時のヒントを得たり、最終的な配色に対する論理的な理由づけを行うことができるようになります。

表色系と色相環の関係性。色を表す方法はさまざま存在する

色相環はもともと、色を規則的に表記するルールである「表色系（ひょうしょくけい）」を構成する要素で、表色系において色を構成する色相を視覚的に表現したものとなります。英語名のカラーオーダーシステムという名前を聞くと、「色の注文に使うシステム？」と思われるかもしれませんが、ここでの"オーダー"は"並び順"や"秩序"を意味します。主な表色系としては、マンセル表色系の他に、日本色彩研究所が1964年に発表したPCCSや、1923年にドイツのノーベル賞化学者によって開発されたオストワルト表色系といったものも存在します。

マンセル表色系

マンセル表色系は、1905年にアメリカの画家、アルバート・マンセルによって考案されました。「色相（Hue）」「明度（Value）」「彩度（Chroma）」の３属性によって色を定義しています。

オストワルト表色系

オストワルト表色系は、ドイツのノーベル賞化学者オストワルトによって考案されました。「混色系」の表色系として知られ、明度や彩度という概念を持たず、明るさや鮮やかさは「白色量・黒色量・純色量」の割合で決まります。

PCCS（日本色研配色体系）

PCCSは、1964年に日本色彩研究所によって開発された色体系です。PCCSは、明度と彩度を合わせた「色調（トーン）」という概念を持っており、「色相」と「トーン」で色を表すことができるのが特徴です。

英語だと、色はColor（カラー）、色相はHue（ヒュー）と呼ぶため、別のものとして認識しやすいですが、日本語だと色と色相はとても似ているので、同じような意味として捉えている人も多いのではないでしょうか？しかし、「色」が無数に存在するさまざまな色のことを指す一方、「色相」は赤・緑・青などの「色あいの種類」のことを指す言葉です。具体的な色を決めるのは、色の三要素である「色相」「彩度」「明度」であり、色相はあくまで色を構成する要素の一つに過ぎないのです。

色相の4分類。暖色・寒色・中性色・無彩色

色相環に表現される色相には、「暖色」「寒色」「中性色」の3種類があります。ここではこれに、白や黒などの色相環には含まれない「無彩色」を加えて色の4分類を紹介します。色相環はあくまでも「相対的な」色相の関係を表現するためのものであるため、ここでの分類は人に与える印象による細かい分類というよりは、あくまでも「赤系 = 火の色」「青系 = 水の色」という世界共通で認識できるレベルでの分類にとどめられています。

暖色

色相環の中でも、赤・オレンジ・黄色の並びに配置されている色を「暖色」と呼びます。その名の通り、暖かみのある色ですね。明るく、活動的、情熱的なイメージを与える色の並びとなります。

寒色

色相環の暖色の反対には、青系の色が並んでいます。これらの色を「寒色」と呼びます。こちらもその名の通り、寒い印象を与える色です。これらの色は、涼しさ・冷静さ・信頼性といった印象を与える色として知られています。

中性色

色相環上で暖色と寒色の間に位置する色をまとめて「中性色」と呼びます。緑系と紫系の色ですね。中性という名の通り、暖かさと寒さどちらの印象も与えない色となります。

無彩色

ここまで紹介した色相環上に表現される色をまとめて、有彩色と呼びます。色相環上では、それぞれの色の彩度を揃えるため、それぞれの色が、彩度の一番高い状態で表示されています。この彩度の高い状態は「その色の持つ個性を最も強く伝える」状態でもあります。例えば、赤という色は、彩度が高ければ高いほど暖かさをより強く表現し、彩度が下がると暖かさの表現は弱まります。そして、どの色でも色の彩度を最も低くするとグレーになります。このグレーの明度を下げると黒に、上げると白になります。この、黒・グレー・白のことを、彩度を持たない色「無彩色」と呼びます。

そして、白と黒、その間に存在するグレーの階調全てを含めて「グレースケール」と呼びます。コンピューターで表現できるグレースケールは全256種類存在します。しかし、実際のデザインの世界では、「グレー」の表現にはこの256種類のみではなく、彩度がとても低い有彩色を使うことも多いです。例えば、少しだけ青みがかかったグレーなどはUIデザインやWebデザインの背景色としてもよく見かけますね。このような色は「準無彩色」と呼ばれ、他の色との相対的な関係上の役割は無彩色と変わらないため、デザインの世界では無彩色と同じ用途で使われます。

ここまで紹介した通り、色相は赤・青・緑などの色あいの種類です。具体的な色を決定するためには、これに加えて「明度」と「彩度」を決定する必要があります。

明度とは「明るさの度合い」であり、どんな色でも明度を最大にすると白になり、明度を最低にすると黒になります。一方、彩度は「色の鮮やかさ」です。彩度が低いと全ての色はグレーになります。言い換えると、彩度は「色相の持つ個性の強さ」として考えることもできます。この組み合わせを調整することで、色の持つ雰囲気を自在に変えることができます。デザインツール上で、彩度（Hue）彩度（Saturation）明度（Brightness）をコントロールするHSBを使って色を調整すると、この変化がよくわかると思います。

色相環上で表現できる色の関係性は主に3種類あります。まず、基準となる色相を一つ選んで、その色相からの相対的な位置関係をもとに「安定感を与える色」「緊張感を与える色」などの配色を得ることができます。なんだか音楽のコードやスケール理論にも似ていますね。

類似色（アナロガス配色）

色相環上で、基準となる色相の両隣2色相を「類似色」と呼びます。その名の通り、基準の色相と似ているため、組み合わせて使うことで安定感を表現することができます。

反対色（トライアド配色）

反対色は、色相環上で基準となる色相の両斜めに位置する色相です。正確には、7から8色相離れた色相のことを指します。反対色という名前から、色相環の「反対側」に位置する色と勘違いしてしまいそうですが、そうではないため注意が必要です。反対色は、基準となる色相と組み合わせることでメリハリや緊張感を与えることができます。カラーパレットを作る際に、アクセントカラーとして反対色が選ばれることも多いです。

補色（ダイアード配色）

色相環上で、基準となる色相の反対に存在するのが「補色」です。補色は、基準の色相との違いがはっきりと分かりやすい色であり、「お互いを引き立てる」効果があります。基準色相と補色の組み合わせは、強いインパクトを持ち、目立つ配色です。

お互いに主張の強い2色を組み合わせるこの配色は、彩度が高い状態で使用するとギラギラした不快感を与えることで知られています。緑と赤は補色の関係ですが、緑の背景に赤の文字は見にくいですよね。このような色の境界がチラつく現象を「ハレーション」といいます。このハレーションを避けながら補色をうまく使うためには、彩度を下げる、2色の境界に無彩色を挟むなどの工夫が必要となります。補色は効果的な配色である一方、使い方に注意が必要なものでもあります。

色相環上の色相の関係をもとに、色の関係性を論理的に導くことができることがわかりました。しかしこれだけでは、最終的な配色を決めるのは難しいですよね。ここでは、色相環をもとに選んだ色相の組み合わせに加えて、明度と彩度の違う色を組み合わせる際の理論を解説します。これには、PCCSトーンマップという図を使うとわかりやすいです。色相環とこのPCCSトーンマップの2つを使うことで、より目的に合った色の表現を論理的に得ることができるようになります。

PCCSトーンマップ

PCCSトーンマップは、明度をY軸、彩度をX軸としたマトリックス上に、トーンを12分類に分けて表示したものです。それぞれのトーンには、ヴィヴィット、ペールなどの名前がついているため、論理的に組み合わせを説明する際にも役立ちます。また、トーンマップの上段の色を、「明清色」、下段の色を「暗清色」と呼びます。そして中央に位置するのが、「中間色」です。中間色とは、ヴィヴィットにグレーを混ぜた色です。中間色は、ヴィヴィットに白を混ぜた「明清色」や、黒を混ぜた「暗清色」と比べ、自然界に多く存在する色として知られています。特に、中間色の中央に位置する「ソフト」や「ダル」は、自然や人間味を表現したいデザインによく用いられます。

同一トーン配色

同一トーン配色は、トーンマップ上で同じトーン内に存在する色同士の組み合わせです。色の明度と彩度が同じであるため、まとまりのある印象を与えます。落ち着いた印象の組み合わせとなるため、インパクトに欠けると感じる場合は、色相の組み合わせに反対色や補色を使い、アクセントを足すと良さそうです。

類似トーン配色

類似トーン配色は、トーンマップ上で隣同士のトーンを組み合わせた配色です。同一トーン配色よりも適度なメリハリを与えることができ、使いやすい配色です。

対照トーン配色

対照トーン配色は、トーンマップ上のY軸（明度）またはX軸（彩度）が遠い位置にある色同士の組み合わせです。「ペール x ダーク」など、明度が対照的な色を組み合わせると、うまくコントラストを表現できます。一方、「ヴィヴィッド x ベリー・ダーク」など、彩度が対照的な組み合わせは、彩度の高い色が際立つため、繰り返し使われるWebデザインのカラーパレットなどでは使いにくいです。しかし、うまく使うと強い印象を残すことができるため、ストリートファッションなどではよく見る配色です。

ここまで見てきた配色は、2つの色の関係性にもとづいた考え方でした。しかし、実際のデザインでは2色だけではなく、より多くの色を使う場合がほとんどですよね。ここでは、3色以上を組み合わせて配色を作る際のポイントを紹介します。

3色の場合。ベースカラー・アソートカラー・アクセントカラー

3色の組み合わせを作る場合も、まず色相環やトーンマップを使って基本の2色を定義します。ここで、基準となる色が「ベースカラー」となり、基準の色に対する関係性から選んだもう一つの色が「アクセントカラー」となります。ベースカラーはデザインにおいて50 ~ 70%の面積を占めるように調整し、デザイン全体の印象を左右するものとなります。一方、アクセントカラーは5 ~ 20%ほど少ないの面積を占めるようにしてデザインにメリハリや動きを与えます。

そして、3色目の色は「アソートカラー」と呼ばれます。アソートカラーは、それ自身が目立つ色ではなく、ベースカラーやアクセントカラーを引き立てるための色です。デザインの20 ~ 30%を占め、ベースカラーもしくはアクセントカラーどちらかに近い色相（類似色）を選択し、明度を調整すると適切なアソートカラーを得ることができます。

3色以上を組み合わせる場合はテーマを決めてまとめよう

もちろん、実際のデザインでは5色、6色などよりたくさんの色が必要になることも多いでしょう。その際には、テーマを決めて取り組むとまとまりのある配色を作ることができます。例えば、オーガニック食品のWebサイトなどで穏やかな印象を与えたい場合には、トーンマップの「ダル」に属する色を基準に配色を考えると良いでしょう。また、多くの色を使いながらも特定の色の印象を強調したい場合には、近い色相の色を4種類選択し、その色相に対する反対色をアクセントカラーとして取り入れるといった方法もあります。その他、オンラインのカラーパレットツールを使って、ベースカラーに合う配色をたくさん生成して試してみるという方法もおすすめです。

関連記事

カラーパレットおすすめランキング！実際に使ってみて良いものだけ厳選！

カラーパレットとは、デザインに使われる配色のことです。配色の基本は、ベースカラーとアクセントカラーの2色の組み合わせや、それにアソートカラーを組み合わせた3色です。この3色の組み合わせやバランスは、色相環やトーンマップを用いた色彩理論である程度導くことができます。しかし、3色以上の組み合わせとなるとテーマやそれぞれの色のバランスなどを調整する必要が出てくるため、途端に難しくなります。そこで、基本の色がいくつか決まったら、その色に合わせて最適な配色を提案してくれるカラーパレットツールを使うのも一つ

今回は、多くのデザイナーが悩むであろう配色について、色相環とトーンマップを用いて論理的なヒントを得る手段を紹介しました。色の理論は、自分で配色を考えるときや、人に配色の根拠を説明する時はもちろん、他の人が作った配色を分析する時にも役に立ちます。例えば、クライアントが好みの色を集めたムードボードを提示してきた時に、一見バラバラに見えるそれぞれの配色にも、トーンマップ上での組み合わせ方など、実は何かしらの共通点があるかもしれません。このような色の分析ができれば、デザイナーとしての表現の幅が広がります。

グラフフィックデザインに関する記事をもっと読む

「グラフィックデザイン」に関連する記事一覧

「より良い未来」をつくるデザイナーのためのWork & Lifeマガジン『unprinted』では、グラフィックデザインに関する学習コンテンツや最新情報など、デザイナーのためのコンテンツを配信中