RGBは画面にどれだけ光を出すかを伝える。HSLは色が見た目上どう見えるかを教える。3つのチャネルを色相・彩度・明度に変換すると、色を手で調整しやすくなる。
RGB から HSL への変換のしくみ
- R、G、Bを255で割り、それぞれを0〜1の範囲にする。
- 3つのうち最大値と最小値を取り、その平均が明度Lになる。
- 最大値と最小値が等しい場合、色はグレー：色相と彩度はどちらも0になる。
- そうでない場合、彩度Sは最大と最小の差から導き、色相Hは最大のチャネルから読み取る。
実際の例
RGB rgb(155, 89, 182)=HSL hsl(283, 39%, 53%)
原理的には正確。ただしH、S、Lは通常丸めて表示されるため、元に戻すとチャネルが1〜2ステップずれることがある。
RGB と HSL の解説
RGB とは？
RGB は赤・緑・青の3つの光のチャネルで色を表し、それぞれ 0〜255 の値を取る。画面の仕組みをそのまま反映しており、3つすべてが255で白、すべてが0で黒になる。色で計算する必要がある場合は RGB が適切で、rgba() を使えば透明度も追加できる。
- 構文:
- rgb(R, G, B)
- 範囲:
- チャネルごとに 0–255
- おすすめ用途:
- コード、canvas、rgba() を使った透明度
HSL とは？
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
- 構文:
- hsl(H, S%, L%)
- 範囲:
- 0–360°, 0–100%, 0–100%
- おすすめ用途:
- パレット、ティントとシェード、テーマ作り
RGB から HSL への参照表
よく使われる CSS の色を RGB から HSL に変換しました。
| 色 | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |