HSL to HEX: Understanding Hue, Saturation, Lightness Color Codes

HSL is one of the most human-friendly ways to think about color—but most CSS variables, theme tokens, and design handoffs still use HEX.

So if you have an HSL color like:

hsl(217, 91%, 60%)

…and need a HEX value like:

#3B82F6

this guide is for you.

You’ll learn what Hue, Saturation, and Lightness actually mean, and the fastest way to convert HSL → HEX using a free online tool.

---

⚡ Convert HSL to HEX in Seconds (Free)

Step 1: Go to the HSL to HEX Converter

Go to HSL to HEX Color Converter.

Step 2: Paste your HSL value

Common formats you’ll see:

• hsl(217, 91%, 60%)
• 217, 91%, 60% (copied from design tools)

Step 3: Copy the HEX output

You’ll get a ready-to-use HEX code like:

• #3B82F6

---

✅ Why Convert HSL → HEX?

HSL is great for thinking and adjusting—but HEX is still the “default currency” in many workflows:

• CSS variables / design tokens: often stored as HEX strings
• Design handoffs: brand guides commonly list HEX swatches
• Libraries + configs: many tools accept HEX as the primary color input
• Sharing: HEX is compact and easy to paste anywhere

---

🧠 What H, S, and L Actually Mean

HSL describes a color in three parts:

Hue (H)

Hue is the position on the color wheel, measured in degrees:

• 0° = red
• 120° = green
• 240° = blue
• 360° wraps back to red

Saturation (S)

Saturation controls how “intense” the color is:

• 0% = grayscale (no color)
• 100% = fully saturated

Lightness (L)

Lightness controls how light or dark the color is:

• 0% = black
• 50% = “normal” brightness
• 100% = white

This is why HSL is so popular for theming: you can keep hue constant and adjust saturation/lightness to generate variations.

---

🎛️ Practical Tip: HSL Is Great for Variations

If you’re building a theme system, HSL makes it easy to produce consistent shades:

• Keep H the same (brand color)
• Adjust L up/down for lighter/darker backgrounds
• Adjust S down for muted states

Then convert to HEX for whatever system expects HEX.

---

🛠 Troubleshooting (Common HSL Issues)

1) Missing percent signs

In CSS, saturation and lightness should be percentages:

• ✅ hsl(217, 91%, 60%)
• ❌ hsl(217, 91, 60)

2) Hue out of range

Hue can wrap around (e.g., 370° is effectively 10°), but keeping it in 0–360 makes it easier to reason about.

3) You might need HSLA (alpha)

If you need transparency, use HSLA or convert to an RGBA/HEX-with-alpha format.

Tip: the full Color Converter can translate between HSL/HSLA, HEX, RGB/RGBA, HSV, and CMYK.

---

📌 Quick Reference

Format	Typical range	Example
HSL	H: 0–360, S/L: 0–100%	hsl(217, 91%, 60%)
HEX	00–FF per channel	#3B82F6

---

🚀 Try the Free Tooladex HSL to HEX Converter

If you want a fast way to translate HSL colors into HEX codes for CSS variables, tokens, or handoffs:

• Instant HSL → HEX conversion
• Easy copy/paste
• Runs locally in your browser