HSLで色を選ぶのは扱いやすいが、スタイルシートやデザインの受け渡し、ブランド文書はまだHEXで動いている。このコンバータはそのギャップを埋め、任意の色相・彩度・明度の組み合わせから6桁のコードを出してくれる。
HSL から HEX への変換のしくみ
- 彩度と明度を小数に直す：60%は0.6になる。
- クロマC = (1 − |2L − 1|) × S を計算する — これは色がどれだけグレーから離れているかを示す。
- 色相を使ってそのクロマを赤・緑・青のチャネルに割り当て、さらに全てのチャネルをL − C/2だけシフトする。
- 各チャネルに255を掛け、四捨五入してから2桁の16進数で書く。
実際の例
HSL hsl(204, 70%, 53%)=HEX #3398DB
丸めは最後のステップで、各チャネルを0〜255の整数に固定する時に一度だけ起きる。結果は入力したHSLに最も近いHEXコードで、通常デザインツールの表示と同じになる。
HSL と HEX の解説
HSL とは？
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
- 構文:
- hsl(H, S%, L%)
- 範囲:
- 0–360°, 0–100%, 0–100%
- おすすめ用途:
- パレット、ティントとシェード、テーマ作り
HEX とは？
HEX コードは先頭の # の後に続く6桁の16進数で、色の赤・緑・青チャネルを格納する。各2桁が1チャネルを表し、00（なし）からFF（最大）までで、RGB と同じ約1670万色を短い表記で示せる。HEX は CSS、デザインツール、ブランドガイドラインでのデフォルトだ。
- 構文:
- #RRGGBB
- 範囲:
- チャネルごとに 00–FF
- おすすめ用途:
- CSS、デザイン引き渡し、ブランドガイドライン
HSL から HEX への参照表
よく使われる CSS の色を HSL から HEX に変換しました。
| 色 | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |