色の三属性（色相・彩度・明度）

「色」を分解すると3つの要素になる

どんな色も、「色相」「彩度」「明度」という3つの属性の組み合わせで成り立っています。
この3つを操作できるようになると、「なんとなく重たい色にしたい」「もう少し落ち着かせたい」という直感を数値に変換できるようになります。

色相・彩度・明度とは

色相（Hue）とは色の「種類」のことです。赤・青・黄・緑などの名前の違いで、
色相環（カラーホイール）上の位置で表されます。

彩度（Saturation）は色の「鮮やかさ」を表します。彩度が高いほどビビッドで鮮やかになり、
低いほどくすんでグレーに近づきます。高彩度の色はポップでエネルギッシュな印象を与え、
低彩度は大人っぽく落ち着いた雰囲気になります。

明度（Brightness）は色の「明るさ」です。高いほど白に近く、
低いほど黒に近い色になります。高明度は軽やかで清潔感を、
低明度は重厚感や高級感を生みます。

HSBで色を意図的に操作する

CanvaやFigmaなどのデザインツールのカラーピッカーでは、
「HSB」（色相・彩度・明度）モードで色を細かく調整できます。

「少し落ち着かせたい」なら彩度を下げる、「明るくしたい」なら明度を上げる、
「高級感を出したい」なら明度と彩度を両方下げる。
このように目指す印象を言葉にしてから数値を操作することで、
感覚ではなく意図的に色を作れるようになります。

同じ色相でも印象はまったく変わる

試しに青（色相220）で考えてみましょう。彩度20・明度95にすると淡いアイスブルーで清涼感があります。
彩度70・明度60にするとミッドブルーになり、
安定した読みやすい色に。彩度80・明度40にするとネイビーになり、
信頼感と重厚さが増します。

同じ「青」でも彩度と明度を変えるだけで、まったく異なる印象のカラーパレットが作れることがわかります。
これを応用すれば、ブランドカラーを基点にした統一感のあるパレットを自分で展開できます。

まとめ

色相・彩度・明度の三属性を理解すると、「なんとなくこの色」から卒業できます。
作りたい印象を言葉にして、それに対応する三属性を操作する習慣をつけることで、
色選びの精度と速度が格段に上がります。

NEXT STEP