色相・明度・彩度

HSL とは何か（What）

HSL（Hue / Saturation / Lightness）は、色を 色相・彩度・明度 の3つの軸で表す方法です。RGB は光のチャンネル量ですが、HSL は「赤っぽい」「暗い」「くすんでいる」といった 人間の言葉に近い 軸です。

なぜ HSL を使うか（Why）

同じ「青」でも、

• 色相だけ 変える → 別の色名（青 → 緑）
• 明度だけ 変える → 同系色の濃淡（ホバー色・無効状態）
• 彩度だけ 変える → 鮮やかさ（アクセント vs 背景）

と、意図が分かりやすくなります。RGB で「少し暗い青」を作るより、HSL で L を下げる 方がデザイナーとエンジニアの会話がスムーズです。

どう使うか（How）

色相環を読む

色相（H）は 0°〜360° の角度で表します。赤はおおよそ 0°、黄 60°、緑 120°、青 240° 付近です。補色は色相環上で 正反対（180°）に位置します。

実務のたとえ

• UI の状態色: 同じ色相で明度・彩度だけ変えてホバー色を作る（例: hsl(220 70% 45%) → hsl(220 70% 38%)）
• ロゴのバリエーション: 彩度を落としたモノトーン版と、鮮やかなメイン版を同じ H で管理する

トーン識別（2級）ドリルへ2級 — 明度・彩度の段階をスウォッチ比較で識別

ミニクイズ