HEX → HSL 変換ツール
HEX の値を入力すると HSL がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
HEX をいったん RGB に変換し、色相（0〜360°）・彩度・明度に直します。最大チャンネルと最小チャンネルの差が彩度を、その平均が明度を決めます。
HEX
HEX は RGB とまったく同じ赤・緑・青の三つ組を 16 進数で書いたものです。1 チャンネルが 2 文字に収まるため短く曖昧さがなく、CSS・デザインツール・設定ファイルのどこでも使われます。大文字小文字は問わず、#abc は #aabbcc の省略形です。8 桁で書くと最後の 2 桁が不透明度になり、#FF000080 は半透明の赤になります。
HSL
HSL は同じ色を人が操作しやすい軸に置き直したものです。色相は 0〜360° の角度、彩度と明度は百分率です。同じ色の明るい版が欲しければ明度だけ上げて他はそのままにできます。ただしここでの明度は計算上の値であって、目が感じる明るさではありません。明度 50% の黄色は明度 50% の青よりずっと明るく見えます。
HEX → HSL の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
2 桁ずつ区切る
#FF6347 → FF · 63 · 47 -
16 進数を 10 進数へ
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
各チャンネルを 0〜1 に正規化
R 1 G 0.388 B 0.278 -
最大・最小チャンネル
max 1 min 0.278 max−min 0.722 -
明度
L = (max+min)/2 = 0.639 = 63.9% -
彩度
S = (max−min)/(1−|2L−1|) = 100% -
色相角
H = 9.1° -
結果
hsl(9, 100%, 64%)
HEX → HSL 変換例
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 |
hsl(0, 100%, 50%) |
| Tomato | #FF6347 |
hsl(9, 100%, 64%) |
| Orange | #FFA500 |
hsl(39, 100%, 50%) |
| Gold | #FFD700 |
hsl(51, 100%, 50%) |
| Limegreen | #32CD32 |
hsl(120, 61%, 50%) |
| Teal | #008080 |
hsl(180, 100%, 25%) |
| Dodgerblue | #1E90FF |
hsl(210, 100%, 56%) |
| Royalblue | #4169E1 |
hsl(225, 73%, 57%) |
| Blueviolet | #8A2BE2 |
hsl(271, 76%, 53%) |
| Hotpink | #FF69B4 |
hsl(330, 100%, 71%) |
よくある質問
グレーなのに色相の値がばらつくのはなぜですか？
グレーには突出したチャンネルがないため色相角は定義されず、慣例で 0 と表記します。彩度が 0 なのでどの色相でも結果は同じです。枠を埋めるための数値であって意味を持つ値ではありません。
HSL の値を丸めてから使ってもよいですか？
色相を整数の度数に丸めるのは安全です。彩度と明度を整数の百分率に丸めると色が 1〜2 段ずれることがあり、HEX に戻して比べると差が現れます。
HSL の明度はコントラスト検査で使う明るさと同じですか？
違います。コントラスト比は相対輝度を使い、緑にはるかに大きな重みを置きます。HSL の明度が 50% でも白背景でコントラストを満たさないことがあります。