HSLは色を選ぶのに分かりやすい表現で、RGBは実際に画面やCanvas API、画像処理が扱う形式。ここでは任意の色相・彩度・輝度の組を正確な0–255のチャネルに変換する。
HSL から RGB への変換のしくみ
- SとLを分数（0–1）に変換し、クロマ C = (1 − |2L − 1|) × S を計算する。
- 色相を60で割ってカラーホイール上のセグメントを見つけ、中間値 X = C × (1 − |(H/60 mod 2) − 1|) を計算する。
- そのセグメントに応じて、C、X、0 を R、G、B のスロットに割り当てる。
- 光度オフセット L − C/2 を三チャネルすべてに加え、255を掛ける。
実際の例
HSL hsl(37, 90%, 51%)=RGB rgb(243, 156, 18)
最終的にチャネルを整数に丸めるまでは計算は正確。色相や彩度に小数が含まれても対応し、最も近いRGBトリプルに落ち着く。
HSL と RGB の解説
HSL とは？
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
- 構文:
- hsl(H, S%, L%)
- 範囲:
- 0–360°, 0–100%, 0–100%
- おすすめ用途:
- パレット、ティントとシェード、テーマ作り
RGB とは？
RGB は赤・緑・青の3つの光のチャネルで色を表し、それぞれ 0〜255 の値を取る。画面の仕組みをそのまま反映しており、3つすべてが255で白、すべてが0で黒になる。色で計算する必要がある場合は RGB が適切で、rgba() を使えば透明度も追加できる。
- 構文:
- rgb(R, G, B)
- 範囲:
- チャネルごとに 0–255
- おすすめ用途:
- コード、canvas、rgba() を使った透明度
HSL から RGB への参照表
よく使われる CSS の色を HSL から RGB に変換しました。
| 色 | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |