色の三属性とは｜色相・明度・彩度と色相環・補色の基礎まとめ

2026-10-19 2026-10-19 19分19秒

色を正確に表現・操作するには「色の三属性」の理解が欠かせません。同じ「青」でも空色と紺色と水色では印象がまるで違うように、色には3つの独立した軸があります。本記事では色相・明度・彩度の基本から、色相環の成り立ち、補色・類似色などの配色関係、さらにPCCSトーンまで、デザイン・絵画・ファッションの実践に直結する色彩の基礎知識を体系的にまとめます。

この記事の目次

色の三属性とは

「色の三属性」とは、すべての色（有彩色）を記述・分類するための3つの独立した要素です。この3軸を組み合わせることで、無数の色を体系的に整理できます。

色相（Hue）

色相は色の種類・色みを表す属性です。赤・橙・黄・黄緑・緑・青緑・青・青紫・紫・赤紫といった「色の名前」で表現される部分にあたります。

色相は連続したスペクトルをなしており、環状に並べると色相環（カラーホイール）になります。色相同士の位置関係（隣接・対角など）が配色の基礎となります。

英語では Hue、マンセル表色系では記号「H」で表します。

明度（Value / Lightness）

明度は色の明るさ・暗さを表す属性です。同じ赤でも、白を混ぜると明るいピンク系に、黒を混ぜると暗いワインレッド系になります。この明るさの差が明度です。

明度が高い（明るい）：白に近い、淡い印象
明度が低い（暗い）：黒に近い、重い・落ち着いた印象

英語では Value（マンセル）または Lightness（PCCS）。マンセル表色系では記号「V」で表し、0（黒）〜10（白）の11段階で示します。

無彩色（白・グレー・黒）は色相と彩度を持ちませんが、明度だけは持ちます。

彩度（Chroma / Saturation）

彩度は色の鮮やかさ・純粋さを表す属性です。同じ赤でも鮮やかな赤とくすんだ赤があるように、色みの強弱が彩度です。

彩度が高い：鮮やかで純粋な色（ビビッド・原色に近い）
彩度が低い：くすんだ・濁った色（グレーに近づく）
彩度がゼロ：無彩色（グレー・白・黒）

英語では Chroma（マンセル）または Saturation（一般的なデジタル用語）。マンセル表色系では記号「C」で表します。

← 横にスクロールできます →

属性	別名	何を表すか	例
色相（Hue）	H	色の種類・色み	赤・青・緑・黄
明度（Value）	V	色の明るさ	淡い・深い・明るい
彩度（Chroma）	C	色の鮮やかさ	鮮やか・くすみ・グレー

3つの属性と色立体（カラーソリッド）

色の三属性を立体空間で表現したものが色立体（カラーソリッド）です。

垂直軸（上下）：明度（上が白・下が黒）
水平軸（外周の方向）：色相（色相環に対応）
水平軸（中心からの距離）：彩度（中心に近いほど無彩色に近い）

マンセル色立体

アメリカの画家アルバート・マンセルが1905年に考案したマンセル表色系（Munsell Color System）は、現在も世界標準として使われる代表的な色の体系です。

色を「HV/C（色相・明度/彩度）」で表記します。たとえば「5R 4/14」なら「5R（赤）・明度4・彩度14」を意味します。日本工業規格（JIS）にも採用されています。

マンセルの色立体は不規則な形（木のような形）をしています。これは色相によって最大彩度の高さ（明度）が異なるためで、たとえば黄色は高明度で最大彩度に達し、赤・青・紫は中〜低明度で最大彩度になります。

PCCSの色立体

日本色彩研究所が開発したPCCS（Practical Color Co-ordinate System）は、色相・明度・彩度に加えて「トーン」という概念を持ちます。PCCS については後の節で詳しく解説します。

色相環とは

色相を環状に並べた図が色相環（カラーホイール）です。隣接する色・対角の色など、色相の位置関係を視覚的に把握するための基本ツールです。

色相環の歴史

← 横にスクロールできます →

年代	人物	内容
1666年	アイザック・ニュートン	プリズムで光を分光し、スペクトル7色を発見
1810年	ヨハン・ヴォルフガング・フォン・ゲーテ	著書『色彩論』で色相環を提唱。ニュートンの物理的アプローチに対し、人間の感覚・心理面から色を捉えた
1839年	ミシェル・ウジェーヌ・シュヴルール	補色の概念を体系化。ゴブラン織物工場での染色研究から「対比の法則」を発見
1905年	アルバート・マンセル	マンセル表色系を考案。色相・明度・彩度の三属性による体系的な分類を確立
1919年	ヨハネス・イッテン	バウハウス開校と同時に色彩教育を展開。12色相環を基にした配色理論（対比・調和・表現）を確立した

12色相環と24色相環

最も基本的な色相環は12色相環です。

RYB（絵の具の三原色）による12色相環

絵の具・印刷では赤（Red）・黄（Yellow）・青（Blue）が三原色（一次色）です。この3色を混ぜて二次色、さらに混ぜて三次色を作ると12色相環ができます。

← 横にスクロールできます →

分類	色
一次色（原色）	赤・黄・青
二次色（混色）	橙（赤＋黄）・緑（黄＋青）・紫（青＋赤）
三次色	黄橙・黄緑・青緑・青紫・赤紫・赤橙

PCCS 24色相環

日本のPCCSでは、1〜24の番号で色相を表す24色相環が使われます。1：赤紫系から始まり、2：赤、4：橙、8：黄、12：黄緑、16：緑、20：青、24：紫のように、番号と色相が対応します。

RGB（光の三原色）による色相環

デジタル・モニターでは赤（Red）・緑（Green）・青（Blue）が三原色（光の三原色）です。印刷のRYBと光のRGBでは補色の組み合わせが異なるため、デジタルデザインでは光の色相環を基準にします。

補色・類似色・その他の配色関係

色相環上の位置関係をもとに、様々な配色の関係が定義されます。

補色（Complementary Color）

補色は色相環で180°対角の位置にある色の組み合わせです。

← 横にスクロールできます →

色	補色
赤	緑
橙	青
黄	紫（青紫）
黄緑	赤紫

補色同士を並べると互いを最も強調し合う（補色対比）ため、コントラストが最大になります。スポーツユニフォームや看板など、目立たせたい場面に活用されます。一方、補色を混色すると無彩色（グレー・茶系）に近づきます。

類似色（Analogous Color）

類似色は色相環で隣接する色（約30〜60°の範囲）の組み合わせです。自然界によく見られる配色で、まとまりのある穏やかな印象を与えます。

例：黄・黄橙・橙 / 青緑・青・青紫

分裂補色（Split-Complementary）

補色を直接使うのではなく、補色の両隣の色を使う配色です。補色配色と同様のコントラストを保ちながら、より柔らかい印象になります。

例：赤に対して「青緑＋黄緑」（緑の両隣）

三角配色（Triadic）

色相環で等間隔（120°）の3色を選ぶ配色です。バランスが取れていながらバリエーション豊かな印象を与えます。

例：赤・青・黄 / 橙・緑・紫

四角配色（Tetradic / Square）

色相環で等間隔（90°）の4色を選ぶ配色です。複数の補色ペアを含み、豊かな色彩表現が可能ですが、バランスを取るのが難しい上級者向けの配色です。

同一色相配色（Monochromatic）

同じ色相で明度・彩度だけを変えた配色です。統一感と深みを同時に得られます。

例：濃い青・標準の青・淡い青（サイトのUI配色でよく使われる）

トーンとは（PCCSの12トーン分類）

トーン（tone）は、明度と彩度を組み合わせた色調の概念です。日本色彩研究所のPCCS（Practical Color Co-ordinate System）では、有彩色を12のトーングループに分類します。

← 横にスクロールできます →

トーン名	記号	明度	彩度	印象
ビビッド	v	中	高	鮮やか・原色的・派手
ブライト	b	高	高	明るく華やか
ストロング	s	中	中高	強い・力強い
ディープ	dp	低	高	深み・重厚感
ライト	lt	高	中	明るく爽やか
ソフト	sf	中高	中	柔らかく穏やか
デュル	d	中	低中	くすみ・落ち着き
ダーク	dk	低	中	暗く大人っぽい
ペール	p	最高	低	淡い・パステル
ライトグレイッシュ	ltg	高	最低	ごく淡くくすんだ
グレイッシュ	g	中	低	くすみグレー系
ダークグレイッシュ	dkg	低	低	暗くくすんだ

トーンと「くすみカラー」の関係

近年流行している「くすみカラー」は、PCCSではグレイッシュ（g）〜デュル（d）トーンに相当します。彩度が低く抑えられており、くすんだ落ち着きのある色感が特徴です。

ファッション・インテリア・webデザインでよく使われる「くすみ系パレット」は、同じトーングループの色でまとめることで、統一感と大人っぽい雰囲気を出しています。

トーン配色の実践

トーンを意識すると「色相は違うが同じ雰囲気でまとめたい」という配色が簡単になります。

同一トーン配色：ペールトーンでまとめると柔らかくナチュラルな印象
類似トーン配色：ビビッド＋ストロングなど近いトーンでまとめると統一感あり
対照トーン配色：ビビッド＋ペールなど明度差の大きいトーンを組み合わせるとメリハリが出る

無彩色の扱い

白・グレー・黒は無彩色（achromatic color）と呼ばれ、色相と彩度を持ちません。明度のみが変化します。

無彩色は単独では地味ですが、有彩色との組み合わせで強力な効果を発揮します。

白との組み合わせ：有彩色を引き立て、清潔感・開放感を出す
黒との組み合わせ：有彩色を引き締め、高級感・重厚感を演出する
グレーとの組み合わせ：有彩色をソフトに見せる。くすみカラーの効果に近い

また、補色を同量で混ぜると理論的には無彩色に近づきます。これを「中和」といい、絵の具で色をくすませる際に応用できます。

三属性を知ると何が変わるか

色の三属性を理解すると、次のような場面で実践的な力になります。

デザイン・Webデザイン：カラーコードを指定する際、HSL（Hue/Saturation/Lightness）の値が三属性と直結します。HSLを操作すると「同じ系統の色で明るさだけ変える」「同じ明度・彩度で色相だけ変える」が意図的にできます。

絵画・イラスト：「なぜこの絵は暗く見えるか」「どうすれば立体感が出るか」を、明度と彩度の観点から分析できます。日本画・水彩では明度の計画が特に重要で、下絵段階でグレースケールに変換して明度設計を確認する技法が使われます。

ファッション・コーディネート：「色がうるさくなりすぎる」と感じるときは彩度を揃えることが解決策になります。色相はバラバラでも、同じトーン（明度×彩度の組み合わせ）にまとめると統一感が出ます。

カラーセラピー・インテリア：ビビッドトーンは刺激的でエネルギッシュ、ペールトーンは癒し・優しさを感じさせる、といった効果は三属性の組み合わせ（トーン）で説明されます。

デジタル色空間と三属性の対応（HSL・HSV・HEX）

デザインソフトやCSSで色を扱うとき、三属性は直接操作できる形で実装されています。

HSLとHSV

HSL（Hue / Saturation / Lightness）は色の三属性をそのまま数値化したものです。

← 横にスクロールできます →

要素	対応する属性	値の範囲
H（Hue）	色相	0〜360°（赤=0°・緑=120°・青=240°）
S（Saturation）	彩度	0〜100%（0%=無彩色・100%=最大彩度）
L（Lightness）	明度	0〜100%（0%=黒・50%=純色・100%=白）

CSSでは hsl(200, 70%, 50%) のように指定します。HSLは人間の感覚に近い直感的な色指定ができるため、「同じ色で明るさだけ変えたい」「同じ明るさで色相だけ変えたい」という操作が数値を変えるだけで実現できます。

HSV（Hue / Saturation / Value）はPhotoshopなどの画像ソフトでよく使われます。HSLとの違いはV（Value）が「最高輝度の割合」を表す点で、V=100%＋S=100%で最も鮮やかな純色になります（HSLでは L=50%＋S=100%）。

HEX（16進数カラーコード）と三属性

#FF6B35（橙系の色）のような16進数カラーコードはRGBを16進数で表したものです。RGB値は三属性を直接表していませんが、RGB→HSL変換は一対一対応しており、色の三属性と完全に互換性があります。

デザインツールではHEXとHSLを相互変換できます。「カラーパレットをくすみ系に統一したい」ときはSの値を下げる、「同じ色相でダークモードのカラーを作りたい」ときはLの値を下げる、といった操作が直感的に行えます。

CSSカスタムプロパティとHSLの組み合わせ

:root {
  --brand-h: 200;       /* 色相: 青系 */
  --brand-s: 70%;       /* 彩度 */
  --brand-l: 50%;       /* 明度 */
  --brand-color: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --brand-light: hsl(var(--brand-h), var(--brand-s), 80%);  /* 明るい版 */
  --brand-dark:  hsl(var(--brand-h), var(--brand-s), 30%);  /* 暗い版 */
}

このように色相だけ変えれば別ブランドカラーへの切り替えも容易で、デザインシステムの維持管理に役立ちます。