色の三属性とは?色相・明度・彩度の意味と見分け方を初心者向けに解説

色の三属性の基本

まずは色の三属性がどんな考え方なのかと、色相・明度・彩度の3つがそれぞれ何を表しているのかを押さえましょう。

色の三属性とは何か

色の三属性とは、色を「色相(色みの種類)」「明度(明るさ)」「彩度(鮮やかさ)」という3つの性質に分けてとらえる考え方のことです。

絵の具でたとえると、色相は「何色の絵の具か」、明度は「白や黒をどれだけ混ぜたか」、彩度は「グレーをどれだけ混ぜたか(混ぜるほどくすむ)」に近いイメージです。

「きれいな青」「落ち着いた赤」のような言い方は人によって受け取り方がばらつきますが、3つの性質に分けると、どんな色なのかを具体的に伝えられるからです。

色を数値や記号で表す仕組み(表色系)の多くも、この3つの属性で色を表しています。

たとえば日本色彩研究所は、マンセル表色系などの一般的な表色系では、色相・明度・彩度の3つの属性によって色を表すと説明しています(一般財団法人日本色彩研究所「PCCS」)。

なお、白・グレー・黒のように色みを持たない色(無彩色)は、3つのうち明度だけを持つ色です。

色みを持つ色(有彩色)との違いは、有彩色・無彩色とは?で解説しています。

色相:赤・黄・緑・青といった色みの種類

色相とは、赤・橙(だいだい)・黄・緑・青・紫といった「色みの種類」のことです。

ふだん「何色?」と聞かれて答える色の名前は、ほとんどがこの色相を指しています。

次の見本は、明るさと鮮やかさをそろえたまま、色相だけを変えて並べたものです。

色相だけを変えた見本(HSLの彩度75%・明度50%のまま、色相の角度だけを変えたもの)

左から順に、赤→橙→黄→緑→青→紫と、色みの種類だけが変わっているのが分かります。

色相を変化の順番どおりに円形に並べた図を「色相環」と呼び、色どうしの関係(隣り合う色か、向かい合う色か)を考えるときに使います。

色相環の見方は色相環とは?で詳しく解説しています。

赤は活気、青は落ち着きのように、色ごとに受けやすい印象は色彩心理とは?で解説しています。

明度:色の明るさ

明度とは、色の明るさの度合いのことです。

白に近づくほど明度が高く、黒に近づくほど明度が低くなります。

同じ青のまま、明度だけを変えた見本

左端の水色から右端の紺まで、どれも色相は同じ青ですが、明るさが変わるだけでまったく別の色に見えます。

もう1つ知っておきたいのは、色相によって、もともとの明るさが違うことです。

上の色相の見本でも、同じ設定で作ったのに、黄は明るく、紫は暗く感じられたのではないでしょうか。

明るい色・暗い色が与える印象の違いは、明るい色・暗い色の印象の違いとは?で解説しています。

彩度:色の鮮やかさ

彩度とは、色の鮮やかさ(色みの強さ)の度合いのことです。

彩度が高いほど色みがはっきりした鮮やかな色になり、低いほどグレーが混ざったようなくすんだ色になります。

同じ青のまま、彩度だけを変えた見本

右へいくほど青みが弱まり、右端では色みがなくなってグレー(無彩色)になっています。

このように、彩度を0まで下げると、どんな色相の色も無彩色になります。

鮮やかな色・くすんだ色の印象の違いは、鮮やかな色・くすんだ色の印象の違いとは?で解説しています。

明度と彩度をセットにした「トーン」

三属性のうち、明度と彩度をひとまとめにした「色の調子」のことを、トーンと呼びます。

トーンは4つめの属性ではなく、明度と彩度の組み合わせに「淡い」「ビビッド」「くすんだ」のような名前を付けて、まとめて扱いやすくしたものです。

「淡い」「くすんだ」「深い」のように、色相が違っても共通したイメージを持つのがトーンの特徴です。

日本色彩研究所が開発したPCCS(日本色研配色体系)は、色を「色相」と「トーン」の2つの軸で表す体系です。

トーンを使った配色は明度・彩度を使った配色とは?、PCCSの仕組みはPCCSとは?で詳しく解説しています。

色の三属性で色を見分ける練習

三属性の意味が分かったら、実際の色を3つの言葉で説明する練習をしてみましょう。

言葉にできるようになると、配色の相談や修正の指示がぐっと具体的になります。

色を「色相・明度・彩度」の3つの言葉で説明する

色を見たら、「何色か(色相)」「明るいか暗いか(明度)」「鮮やかかくすんでいるか(彩度)」の順に、3つの質問に答えてみます。

身近な色を、この3つの言葉で説明した例が次の表です。

色	色相	明度	彩度
紺	青	低い	中くらい
水色	青	高い	低め
鮮やかな赤	赤	中くらい	高い
えんじ色	赤	低い	中くらい
ベージュ	黄みの橙	高め	低い
グレー	なし(無彩色)	中くらい	なし

表の「高い・低い」は、見た目で判断したおおまかな目安です。

たとえば紺と水色は、どちらも色相は青ですが、明度と彩度がまったく違うため、別の名前で呼ばれています。

「もう少し落ち着いた青に」と言われたときも、「明度を下げるのか、彩度を下げるのか」と三属性で考えると、どう直せばよいかが分かりやすくなります。

2つの色の違いがどの属性かを見つける

次は、2つの色を見比べて、どの属性が違うのかを当ててみましょう。

A・B・Cの3組は、それぞれ三属性のうち1つだけを変えています。

各組の2色は、三属性のうちどれが違う?

答えを見る

Aは明度の違い(同じ青の、明るい色と暗い色)、Bは色相の違い(赤と青という色みの種類)、Cは彩度の違い(鮮やかな青と、グレーが混ざってくすんだ青)です。

実際のデザインでは複数の属性が同時に違うことがほとんどなので、「一番大きく違うのはどれか」から考えると見分けやすくなります。

明度の差はモノクロにすると確かめやすい

3つの属性のうち、目で見て一番判断しにくいのが明度です。

色相や彩度の違いに目を奪われて、明るさの差を見落としやすいからです。

迷ったときは、デザインのスクリーンショットを画像編集ソフトなどでモノクロ(グレースケール)に変換してみると、色相と彩度の情報が消え、明るさの差だけを比べられます。

たとえばiPhoneなら、スクリーンショットを撮って「写真」アプリの編集画面でフィルタの「モノ」を選ぶだけで確かめられます。

画面全体をモノクロにしたいときは、「設定」の「アクセシビリティ」→「画面表示とテキストサイズ」→「カラーフィルタ」で「グレイスケール」を選ぶ方法もあります。

ただしモノクロ変換は簡易的な確認方法なので、文字と背景の読みやすさは、明るさの差を数値で表すコントラスト比(数値が大きいほど文字がくっきり読めます)で確かめましょう。

色の見え方が人によって違うことや、見え方を確かめるほかの方法は、色のアクセシビリティとは?で紹介しています。

色の三属性とHSB・HSLの関係

デザインツールやCSSで色を選ぶときに出てくるHSB・HSLは、色の三属性に近い考え方で色を指定する方法です。

ここでは、三属性との対応と、使うときの注意点を見ていきます。

HSB・HSLとは何か

HSBとHSLは、色を「色相」「彩度」「明るさ」の3つの数値で指定する方法(カラーモデル)です。

似た仕組みが2つあるのは、使われる場面が違うためです。

PhotoshopやIllustratorなどのデザインツールのカラーピッカーではHSB(HSVとも呼ばれます)がよく使われ、Webサイトの見た目を指定するCSSではHSLで色を書けます。

たとえばデザインツールのFigmaでは、カラーピッカーの表示をHex・RGB・CSS・HSL・HSBの5つから切り替えられます(Figmaヘルプセンター「Color models in Figma Design」(英語))。

文字	英語	三属性との対応	値の表し方
H	Hue	色相	色相環上の角度(0〜360度)。0度が赤、120度が緑、240度が青
S	Saturation	彩度	0〜100%。0%で色みのないグレーになる
B	Brightness	明るさ(HSB)	0〜100%。0%で黒。彩度100%・明るさ100%で最も鮮やかな色(純色)
L	Lightness	明るさ(HSL)	0〜100%。0%で黒、100%で白、50%で最も鮮やかな色(純色)

表の「純色」とは、その色相の中で一番鮮やかな色、つまり白・黒・グレーがまったく混ざっていない色のことです。

HSBとHSLは、Hの考え方は同じですが、明るさ(BとL)の数値の決め方が違い、それに合わせてSの計算方法も少し違います。

HSBでは明るさ100%でも彩度を上げれば鮮やかな色のままですが、HSLでは明度100%にすると、彩度に関係なく白になります。

同じ色でも、HSBとHSLでは表示される数値が変わるので、どちらのモデルで見ているかを意識しておきましょう。

CSSのhsl()で三属性を動かしてみる

CSSでは、hsl()という関数で、色相・彩度・明度の3つの値を使って色を指定できます(MDN「hsl()」)。

次のコードは、ボタンの通常時の色と、マウスを重ねたとき(ホバー時)の色を、明度だけ変えて指定する例です。

.button {
  background-color: hsl(210 70% 50%); /* 色相210度(青)・彩度70%・明度50% */
}

.button:hover {
  background-color: hsl(210 70% 35%); /* 明度だけ下げて、同じ青の暗い色にする */
}

色相と彩度はそのままで明度の数値だけを変えているので、「同じ青のまま少し暗くする」という意図がコードから読み取れます。

HEXカラーコード(#267FD9のように、色を16進数の6桁の英数字で表す書き方。Webでよく使われます)では3つの属性が数値に直接表れないため、色の調整には三属性に対応したHSLのほうが扱いやすい場面があります。

HEXカラーコードの仕組みはカラーコードとは?で解説しています。

HSLの明度は、見た目の明るさと同じではない

注意したいのは、HSLやHSBの明るさの数値が、人が感じる明るさと一致するわけではないことです。

次の2つの色は、どちらもHSLの彩度100%・明度50%で、色相だけが違います。

HSLの明度はどちらも50%だが、見た目の明るさは大きく違う

左の黄はとても明るく、右の青はかなり暗く見えます。

実際に白い文字をのせたときのコントラスト比を計算すると、黄は約1.07:1でほとんど読めず、青は約8.6:1ではっきり読めます。

数値が同じなのに見た目が違うのは、人の目が緑や黄色の光を明るく、青の光を暗く感じやすい性質を持っているからです。

コントラスト比の計算でも、色の明るさを求めるときに、赤の光を約21%、緑の光を約72%、青の光を約7%の重みで足し合わせています(WCAG 2.2 の相対輝度の定義、WAICによる日本語訳)。

そのため、HSLで明度の数値をそろえても、文字の読みやすさまでそろうわけではありません。

文字と背景の組み合わせは、HSLの数値ではなくコントラスト比で確かめましょう(コントラスト比とは?)。

色の組み合わせで文字の読みやすさが決まる仕組みは、配色と可読性とは?で、文字・色・レイアウトを合わせた可読性の全体像は可読性とは?で解説しています。

実践のポイント

色の三属性を使って色を考えるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 色相(何色か)だけで色を選び、明度と彩度を気にしないことがあります。
  同じ「青」でも水色と紺では印象も読みやすさも違うので、3つの属性をそろって決めましょう。
• 明度と彩度を混同してしまうことがあります。
  明度は「明るいか暗いか」、彩度は「鮮やかかくすんでいるか」で、明るくてくすんだ色(白を多く混ぜた淡いピンクのようなパステルカラー)もあれば、暗くて鮮やかな色(黒を少し混ぜた深い赤のような色)もあります。
• HSLの明度の数値がそろっていれば、見た目の明るさもそろうと考えてしまうことがあります。
  色相によって感じる明るさは違うので、読みやすさはコントラスト比で確かめましょう。

よくある質問

• Q. 「色の三要素」と「色の三属性」は違うもの?
  A. 同じ意味で使われることが多い言葉です。
  どちらも、色を色相・明度・彩度の3つに分けてとらえる考え方を指しています。
• Q. 白や黒にも三属性はある?
  A. 白・グレー・黒のような無彩色は、色相と彩度を持たず、明度だけを持つ色です。
  白が最も明度が高く、黒が最も明度が低い色になります。
• Q. HSBとHSLは、どちらを使えばいい?
  A. 使っているツールで表示しやすいほうでかまいません。
  CSSで書く場合はhsl()が使えるのでHSLに慣れておくと便利ですが、どちらの数値でも、読みやすさの最終確認はコントラスト比で行いましょう。

まとめ

色の三属性とは、色を色相(色みの種類)・明度(明るさ)・彩度(鮮やかさ)の3つの性質に分けてとらえる考え方です。

色を3つの言葉で説明できるようになると、「どの属性をどう変えればよいか」が分かり、配色の調整や相談が具体的になります。

デザインツールやCSSのHSB・HSLも三属性に近い考え方ですが、明るさの数値は見た目の明るさと一致しないので、読みやすさはコントラスト比で確かめましょう。

まずは身の回りにある色を3つ選び、「色相は何か・明るいか暗いか・鮮やかかくすんでいるか」の3つの言葉で説明してみましょう。