色の基本 ― 色相・明度・彩度を理解する

色を「なんとなく」で選んでいませんか？

「この色、なんかしっくりこないな......」。デザインを始めたばかりの人が最もつまずくのが色選びです。

でも、色には仕組みがあります。仕組みを知れば、感覚ではなくロジックで色を選べるようになります。

色の三属性

すべての色は、「色相」「明度」「彩度」という3つの属性で説明できます。

色相（Hue）― 色の種類

赤、青、黄、緑......といった「何色か」を表すのが色相です。色相を円状に並べたものを「色相環」と呼びます。色相環上で近い色は調和しやすく、反対側にある色は強いコントラストを生みます。

明度（Value）― 明るさ

色の明るさ・暗さを表します。白に近いほど明度が高く、黒に近いほど明度が低くなります。

• 明度が高い色 → 軽い、やわらかい印象
• 明度が低い色 → 重い、力強い印象

明度 低い（暗い）明度 高い（明るい）

同じ青の明度グラデーション ― 明るさだけを段階的に変化

彩度（Saturation）― 鮮やかさ

色の鮮やかさを表します。彩度が高いほどビビッドで目を引き、低いほど落ち着いた印象になります。

• 彩度が高い色 → 目立つ、元気、カジュアル
• 彩度が低い色 → 上品、落ち着き、信頼感

彩度 低い（くすんだ）彩度 高い（鮮やか）

同じ赤の彩度グラデーション ― 鮮やかさだけを段階的に変化

三属性の使い分け

「トーン」という考え方

明度と彩度の組み合わせを「トーン」と呼びます。同じ赤でも、明るくて鮮やかな赤（ビビッドトーン）と、暗くて落ち着いた赤（ダークトーン）ではまったく印象が違います。

色選びに迷ったら、まず「トーン」を揃える。それだけで配色はまとまります。

例えば、パステルトーン（明度が高く彩度が低い）で統一すれば、やわらかくかわいい印象に。ダークトーンで統一すれば、高級感や信頼感のある印象になります。

パステルトーン（明度高・彩度低）

ダークトーン（明度低・彩度中）

同じ色相でもトーンが変わると印象がまったく異なる

Webとprint紙で色が違う理由

RGB と CMYK

• RGB（Red / Green / Blue）: 画面用。光の三原色で色を表現する。混ぜると明るくなる。
• CMYK（Cyan / Magenta / Yellow / Key=Black）: 印刷用。インクで色を表現する。混ぜると暗くなる。

画面で見た色と印刷した色が違う......という現象は、RGBとCMYKの違いが原因です。Webデザインなら基本的にRGBだけ意識すれば大丈夫です。

まとめ

色の三属性（色相・明度・彩度）を理解すれば、「なんとなく」ではなく「根拠を持って」色を選べるようになります。次の記事では、実際の配色テクニックを学んでいきましょう。