HSLは人が色について話す方法を表す：どの色相か、どれだけ彩度があるか、どれくらい明るいか。HEXコードをHSLに変換すると、色を実際に調整できる形になる — 明るくしたり、彩度を落としたり、そこからスケールを作るのが簡単になる。
HEX から HSL への変換のしくみ
- HEXコードをRGBに変換し、それぞれのチャネルを255で割って0〜1の範囲に収める。
- 3つの値のうち最大と最小を見つける。それらの平均が明度Lになる。
- 最大と最小の差が彩度Sを決める：明るい色は(2 − max − min)で割り、暗い色は(max + min)で割る。
- 最大値を持つチャネルが色相Hを決める — 赤は0°、緑は120°、青は240° — 他の2つのチャネルがそのセグメント内での色相の位置を決める。
実際の例
HEX #2ECC71=HSL hsl(145, 63%, 49%)
計算自体は正確だが、HSLの値は通常度およびパーセントで丸められるため、元に戻すと元のRGBから1〜2ステップずれることがある — 実用上は目に見えないが繰り返し変換する場合は知っておくべき点。
HEX と HSL の解説
HEX とは？
HEX コードは先頭の # の後に続く6桁の16進数で、色の赤・緑・青チャネルを格納する。各2桁が1チャネルを表し、00（なし）からFF（最大）までで、RGB と同じ約1670万色を短い表記で示せる。HEX は CSS、デザインツール、ブランドガイドラインでのデフォルトだ。
- 構文:
- #RRGGBB
- 範囲:
- チャネルごとに 00–FF
- おすすめ用途:
- CSS、デザイン引き渡し、ブランドガイドライン
HSL とは？
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
- 構文:
- hsl(H, S%, L%)
- 範囲:
- 0–360°, 0–100%, 0–100%
- おすすめ用途:
- パレット、ティントとシェード、テーマ作り
HEX から HSL への参照表
よく使われる CSS の色を HEX から HSL に変換しました。
| 色 | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |