デザインについての学習メモブログ

色相環とは?見方と配色への活かし方を初心者向けに解説

記事内に広告が含まれています。

色相環とは?見方と配色への活かし方を初心者向けに解説

色を選ぶとき、「なんとなく好きだから」ではなく、根拠を持って選べたら心強いですよね。

実はデザインの世界には、色同士の関係性を一目で把握できる色相環という便利な道具があります。

この記事では、色相環とは何か、そしてそれを実際の配色にどう活かせるかを、初心者向けにわかりやすく解説します。

基本の理解

まずは色相環がどんな仕組みで、何を表しているのかを理解しましょう。

色相環とは何か

色相環とは、赤・橙・黄・緑・青・紫といった色相(色みの種類)を、変化の順番通りに円形に並べた図のことです。

PCCSの24色相環の図(リング状)。円周上に24色が均等に配置されている

色の見た目を決める要素には、色相(色みの種類)のほかに、明度(色の明るさ。白っぽいか黒っぽいか)と彩度(色の鮮やかさ。派手か、くすんでいるか)があります。

色相環はこのうち色相どうしの関係だけを扱う道具で、明度・彩度は別の軸として後から調整するものだと覚えておきましょう。

色は本来、赤から紫まで虹のように連続的に変化していきます。

この連続した変化を直線ではなく円環にまとめることで、両端(赤と紫)もつながり、色同士の距離や位置関係を直感的に把握できるようになります。

たとえば色相環上で正反対の位置にある色同士は「補色」と呼ばれ、隣り合う色同士は「類似色」と呼ばれます。

位置関係を見るだけで、その2色を組み合わせたときにどんな印象になるかがある程度予測できるのです。

たとえば類似色(緑と黄緑など)を組み合わせると、まとまりのある穏やかで安心感のある印象になります。

一方、補色(青と橙など)を組み合わせると、お互いを引き立て合う、メリハリのある鮮やかな印象になります。

つまり色相環は、色同士の関係性を視覚化した「地図」のような道具だと考えると理解しやすいでしょう。

色相環にはいくつかの体系がある

実は「色相環」という呼び名の図は1つに決まっているわけではなく、17世紀以降、複数の科学者・芸術家がそれぞれ独自の色相環を発表してきました。

この記事では、そのなかでも日本の配色学習で広く使われているPCCSという体系の24色相環を使って解説します。

色相環の元祖とされるのは、物理学者アイザック・ニュートンが1704年の著書『光学』で発表した図です。

プリズムで光を分解して見えた虹の7色を、円環状に並べました。

その約100年後、詩人ゲーテは、ニュートンの物理学的なアプローチに異を唱え、人が実際に色をどう感じるかという知覚体験を重視した独自の色相環を1810年の著書『色彩論』で発表しました。

20世紀に入ると、米国の画家・美術教育者アルバート・マンセルが、色相に明度・彩度を加えた3属性で色を表す「マンセル表色系」を考案し、後に国際的な標準規格として広く使われるようになりました。

同じ頃、ドイツの化学者オストワルトも、知覚の研究に基づく24色相の色相環を発表しています。

また、赤・黄・青の三原色から橙・緑・紫の二次色を混色で作る「12色相環」を広めたのは、1920年代にバウハウス(ドイツの美術学校)で教育者を務めたヨハネス・イッテンです。

絵の具の混色に基づいたわかりやすさから、現在も美術・デザインの入門教育で広く使われています。

そして日本では、1966年に一般財団法人日本色彩研究所が「PCCS(日本色研配色体系)」という独自の体系を発表しました。

赤・黄・緑・青の心理的な4原色を骨格にした24色相と、明度・彩度を統合した「トーン」という考え方を組み合わせたもので、色彩検定でも採用されている、日本の配色学習における事実上の標準です。

PCCSの成り立ちや「トーン」の詳しい考え方、色彩検定との関係はPCCSとはという記事で詳しく解説しています。

体系によって色相の数や基準にする原色は異なりますが、「円環上の位置関係で色の相性を捉える」という基本的な考え方はどれも共通しています。

この記事では、PCCSの24色相環をもとに、色相環そのものの基本的な使い方を押さえていきましょう。

色相環をどう配色に活かすか

色相環は、配色を考える際の具体的な手順を教えてくれます。

色を感覚だけで選んでしまうと、なぜその組み合わせがよいのか説明できず、再現性もありません。

色相環上の位置関係というロジックに基づけば、根拠を持って色を選べます。

色相環上で基準色(茶色)とその補色(青)を選んでいるイメージ図。2つの色が矢印でつながれている

基本的な進め方は次の通りです。

  1. まずベースとなる基準色を1つ決める
  2. 色相環上での位置関係(隣り合う色でまとめるか、正反対の色で対比させるか)をもとに、組み合わせる色を選ぶ
  3. 最後に明度・彩度や使う面積を調整して、全体のバランスを整える

たとえばカフェのチラシを作る場面で考えてみましょう。

  • 基準色を決める: お店のイメージカラーである「茶色(濃い橙)」をベースにする。
  • 組み合わせる色を選ぶ: メリハリを出したいので、色相環で反対側にある「青」を補色としてアクセントに選ぶ。
  • 調整する: 全体は茶色っぽくまとめ、一番目立たせたい「期間限定」の文字だけに青を使う(面積の調整)。
カフェのチラシ配色例。茶色の見出しブロック、灰色のテキスト行、青いアクセントの丸型バッジ

この3ステップを踏むだけで、行き当たりばったりではない、意図の伝わる配色に近づけます。

実践のポイント

色相環の考え方は便利な反面、それだけに頼ると陥りやすい注意点もあります。

よくある疑問とあわせて確認しましょう。

注意点・よくある間違い

  • 色相環の位置関係だけを見て配色を決め、明度・彩度の調整を忘れてしまうと、狙った印象にならないことがあります。色相環はあくまで「色相(色みの種類)」の関係を示す道具であり、明るさ・鮮やかさは別の軸として調整する必要があります。
  • 色相環のルール通りに色を選んでも、実際に使う面積(色の割合)によって見え方の印象は大きく変わります。たとえばベースカラー70%・メインカラー25%・アクセントカラー5%程度を目安にすると、まとまりやすくなります。比率の詳しい考え方は色の割合の記事で解説しています。ルールは出発点であり、最終判断は実際に配置して確認することが大切です。

よくある質問

  • Q. 色相環に決まった色数はあるの?
    A. 体系によって異なります。この記事で使っているPCCSは24色相、美術教育でよく使われるイッテンの色相環は12色相です。PCCSの24色相環は、円周を24等分した位置に色を均等に配置したものだとイメージすると分かりやすいです。まずはこの24色相環で、色同士のおおまかな関係を掴めば十分です。
  • Q. 色相環さえ使えば必ず良い配色になる?
    A. 色相環は色同士の関係性を教えてくれるだけで、明度・彩度・面積といった他の要素も合わせて調整しないと、狙った印象には仕上がりません。位置関係はあくまで配色を考える出発点です。
  • Q. イッテンの12色相環と、この記事のPCCS(24色相環)は何が違う?
    A. 基本的な考え方(位置関係で色の相性を捉える)は同じですが、PCCSは色相数が24と多く、より細かい関係性を扱えます。また、明度・彩度をセットにした「トーン」という概念を持つ点も特徴です。美術の基礎だけを知りたいならイッテンの12色相環でも十分ですが、色彩検定を目指す場合や、より専門的な配色設計をしたい場合はPCCSとはという記事もあわせて読むとよいでしょう。

まとめ

色相環は、赤から紫までの色相を円形に並べて色同士の関係を可視化した道具です。

ニュートンの色相環を起源に、マンセル表色系やイッテンの12色相環など複数の体系が発展し、日本では日本色彩研究所がPCCS(24色相+トーン)という独自の体系を発表しました。

この記事では、色彩検定でも採用されているPCCSの24色相環をもとに解説しました。

正反対の位置にある補色、隣り合う類似色といった関係性をもとに、基準色を決める→組み合わせる色を選ぶ→明度・彩度と面積を調整する、という手順で考えると、根拠のある配色ができるようになります。

ただし色相環だけに頼らず、明度・彩度・使用面積もあわせて確認する視点を持つことが大切です。

あわせて読みたい書籍

色相環やPCCS(日本の配色体系)についてさらに体系的に学びたい方は、色彩検定の公式テキストもあわせてチェックしてみてください。

色彩検定協会 9784909928030 本体画像

色彩検定 公式テキスト 3級編(2020年改訂版)

色彩検定協会 / 型番 9784909928030

PR