HSL → HEX 変換ツール
HSL の値を入力すると HEX がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
色相・彩度・明度から RGB を計算し、各チャンネルを 16 進数 2 桁で表記します。明度 50% のときに彩度が最もはっきり出ます。
HSL
HSL は同じ色を人が操作しやすい軸に置き直したものです。色相は 0〜360° の角度、彩度と明度は百分率です。同じ色の明るい版が欲しければ明度だけ上げて他はそのままにできます。ただしここでの明度は計算上の値であって、目が感じる明るさではありません。明度 50% の黄色は明度 50% の青よりずっと明るく見えます。
HEX
HEX は RGB とまったく同じ赤・緑・青の三つ組を 16 進数で書いたものです。1 チャンネルが 2 文字に収まるため短く曖昧さがなく、CSS・デザインツール・設定ファイルのどこでも使われます。大文字小文字は問わず、#abc は #aabbcc の省略形です。8 桁で書くと最後の 2 桁が不透明度になり、#FF000080 は半透明の赤になります。
HSL → HEX の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
HSL を RGB へ
hsl(9.1 100% 63.9%) → rgb(255, 99, 71) -
10 進数を 16 進数へ
R 255 = 15×16 + 15 → FF G 99 = 6×16 + 3 → 63 B 71 = 4×16 + 7 → 47 -
つなげる
# + FF + 63 + 47 = #FF6347
HSL → HEX 変換例
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) |
#FF0000 |
| Tomato | hsl(9, 100%, 64%) |
#FF6347 |
| Orange | hsl(39, 100%, 50%) |
#FFA500 |
| Gold | hsl(51, 100%, 50%) |
#FFD700 |
| Limegreen | hsl(120, 61%, 50%) |
#32CD32 |
| Teal | hsl(180, 100%, 25%) |
#008080 |
| Dodgerblue | hsl(210, 100%, 56%) |
#1E90FF |
| Royalblue | hsl(225, 73%, 57%) |
#4169E1 |
| Blueviolet | hsl(271, 76%, 53%) |
#8A2BE2 |
| Hotpink | hsl(330, 100%, 71%) |
#FF69B4 |
よくある質問
HEX に変換して戻すと HSL の値が少し変わります。
HEX はチャンネルあたり 256 段階しか保存しないため、最も近い段階に吸着します。小数を含む色相・彩度は段階の間に落ちるので、戻すときにわずかにずれます。
色相に 360 より大きい数を入れるとどうなりますか？
色相は角度なので一周して戻ります。400° は 40°、−20° は 340° です。ループで色相に一定値を足してパレットを作るときに便利な性質です。
明度を 100% や 0% にすると色相が無視されます。不具合ですか？
正常です。100% では全チャンネルが最大になって白、0% ではすべて 0 になるため、色相と彩度が影響する余地がありません。色を見せたいならおおよそ 10〜90% の範囲を使ってください。