HEXからHSLへの変換ツールとは？
このツールは、16進数のカラーコード（CSSやデザインソフトでおなじみの#RRGGBB表記）を、HSLカラーモデル（Hue＝色相、Saturation＝彩度、Lightness＝明度）に変換します。HSLは、HEXやRGBよりも直感的に扱えることが多いカラーモデルです。なぜなら、「どんな色か（色相）」「どれくらい鮮やかか（彩度）」「明るいか暗いか（明度）」という、人が色を感じるそのままの感覚で表現できるからです。標準的なsRGBのHEX表記であれば、あらゆるRGBベースの色に対応し、特定の国や規格に依存することはありません。
使い方
#3498DBのようなHEXカラー値を入力してください。先頭の#はあってもなくても構いません。また、#0AFのような3桁の短縮形は、自動的に#00AAFFへ展開されます。変換ツールは、対応するHSLの3つの値に加えて、赤・緑・青の各チャンネル値（0〜255）もあわせて表示します。
計算式の解説
まず、HEX値を赤・緑・青のバイト値に分解し、それぞれを255で割って0〜1の範囲に正規化します。この3つの値のうち最大値をmax、最小値をminとします。明度（Lightness）はその平均で求められます：
$$L = \frac{\max + \min}{2}$$maxとminが等しい場合（つまりグレー）は彩度（Saturation）は0です。それ以外で、\(L > 0.5\) のときは \(S = \dfrac{\max - \min}{2 - \max - \min}\)、そうでなければ \(S = \dfrac{\max - \min}{\max + \min}\) となります。色相（Hue）はどのチャンネルが最大値かによって決まり、60を掛けて度数に変換します。
$$H = 60^{\circ} \times \begin{cases} \dfrac{G - B}{d} \bmod 6, & \max = R \\[0.6em] \dfrac{B - R}{d} + 2, & \max = G \\[0.6em] \dfrac{R - G}{d} + 4, & \max = B \end{cases} \qquad d = \max - \min$$
計算例
#3498DBを例にとります。R = 52、G = 152、B = 219。正規化すると \(r \approx 0.2039\)、\(g \approx 0.5961\)、\(b \approx 0.8588\)。\(\max = b = 0.8588\)、\(\min = r = 0.2039\) なので、\(L = 0.5314\)（53.14%）となります。\(L > 0.5\) なので、
青が最大値のため、
$$H = 60 \times \left(4 + \frac{0.2039 - 0.5961}{0.6549}\right) = 60 \times 3.4011 \approx 204.07^{\circ}$$結果は hsl(204, 70%, 53%) です。
よくある質問
短縮形のHEXコードは使えますか？ はい。#F0Cのような3桁のコードは自動的に展開されます。
HSL値は正確ですか？ 色相・彩度・明度はフル精度で計算され、表示時にのみ四捨五入されます。丸める前の生の値も確認できます。
先頭の「#」は必須ですか？ いいえ。先頭の#があってもなくても、どちらの値でも変換できます。
