HSBの基本構成
- Hue（色相）
赤、黄、緑、青など、色そのものの種類を表す要素。角度（0°〜360°）で指定されます。 - Saturation（彩度）
色の鮮やかさ。100%が最も純度の高い（鮮やかな）色。0%では無彩色（白または灰）に近づきます。 - Brightness（明度）
色の明るさ。100%では最も明るく、0%になると黒になります。
HSBとHSL（色相・彩度・輝度）の違い
基本構造の違い
- HSB（HSV）
サイドは円筒（円錐）形で、上部が明るく、下部が暗い。彩度は中心から外へ。 - HSL
上下が白と黒で、中央が中間灰（50%輝度）。彩度は中央から外へ。双円錐（二重円錐）として表されます。
黒と白の扱いの違い
- HSB：
- 明度0% → 黒（彩度・色相に関係なし）
- 明度100%かつ彩度0 → 白（色相に関係なし）
→ 黒と白は対でもなく、明度の変化のみで行き来できません。
- HSL：
- 輝度0% → 黒
- 輝度100% → 白
→ 白と黒は完全に対比されます。
明度 vs 輝度（Brightness vs Lightness）
- HSBの明度：RGB成分の最大値（または平均）により、色の明るさを単純に示します。
- HSLの輝度：白と黒の混合のバランスを考慮した明るさ。50%で最も鮮やかな色になります。
HSB（HSV）とHSLの比較まとめ
| モデル | 黒への到達 | 白への到達 | 彩度の基準 | 特徴 |
|---|---|---|---|---|
| HSB / HSV | 明度0%で黒 | 明度100%かつ彩度0で白 | 彩度0 = 白に近い | 直感的な明るさ調整がしやすい、写真編集に向く |
| HSL | 輝度0%で黒 | 輝度100%で白 | 彩度0 = 中間灰 | CSS対応でweb制作に適す、グレー調が自然に表現できる |
用途に応じた選び方
- UIデザインや写真編集では、「明るさを直感的に操作できる」HSBが好まれます。
- Web開発（CSS）では、HSLが標準として使われやすく、グレーやトーンの操作が想定しやすいモデルです。
補足：HSBとHSVは同じ？
HSB（Brightness）とHSV（Value）は呼び方の違いだけで、色空間としては同じものを指します。
まとめ
HSB（色相・彩度・明度）は、明るさの調整が直感的で、デザイン作業に便利な色モデルです。HSL（色相・彩度・輝度）は、白と黒のバランスの操作が明快で、webやCSSとの親和性が高い色モデルです。用途に合わせて選ぶことで、色調整の効率と精度が向上します。
