HEX to HSL Color Converter

Convert HEX color codes to HSL (Hue, Saturation, Lightness) values instantly. Perfect for CSS developers who work with HSL color functions.

HEX Color

Enter a 6-digit HEX color code

HSL Result

Enter a valid HEX color to see HSL values

Why Convert HEX to HSL?

HEX codes are great for specifying exact colors, but they don't tell you anything about the color itself. #3B82F6 is just six characters — you can't tell it's a blue, or how vibrant it is, or how light. HSL (hue, saturation, lightness) describes what the color actually is.

How the Conversion Works

The hex code first converts to RGB (each pair becomes 0-255). Then the RGB values transform to HSL using the standard algorithm: hue is calculated from which channel dominates, saturation from how spread apart the values are, and lightness from their average.

For #3B82F6: RGB is (59, 130, 246). The blue channel dominates, giving a hue around 217°. The spread between channels gives 91% saturation. The average gives 60% lightness.

When HSL Is More Useful Than HEX

CSS Custom Properties

Store hue, saturation, and lightness as separate CSS variables. Change one value to adjust the entire theme. You can't do this with hex codes.

Creating Color Variations

Want a darker version? Reduce the lightness value. Want it more muted? Reduce saturation. With hex, you'd need to manually calculate new values.

Finding Related Colors

Complementary colors are 180° apart in hue. Analogous colors are ±30°. This is trivial in HSL, impossible with hex alone.

Programmatic Adjustments

Building a theme switcher or dark mode? Adjust lightness values across your palette with simple math. Much cleaner than manipulating hex strings.

Understanding HSL Format

Hue (0-360°): The actual color on the wheel. 0° is red, 120° is green, 240° is blue. Values wrap around — 360° equals 0°.

Saturation (0-100%): How vibrant vs. gray. 100% is the purest form of that hue. 0% is completely gray (no hue).

Lightness (0-100%): How light or dark. 0% is black, 100% is white, 50% is the "normal" color.

Frequently Asked Questions

Do I need to include the # symbol?

No, both formats work. Enter 3B82F6 or #3B82F6 — the converter handles both identically.

What does hsl(0, 0%, 50%) mean?

Hue 0° (red), but 0% saturation means no actual color — it's gray. 50% lightness makes it medium gray. This is rgb(128, 128, 128) or #808080.

Can I use HSL in all browsers?

Yes, HSL is supported in all modern browsers including IE9+. It's been part of the CSS specification since CSS Color Module Level 3.

How do I convert HSL back to hex?

Use our HSL to Hex Converter tool. The conversion is fully reversible — you can go back and forth without losing precision.

What's the CSS syntax for HSL?

hsl(hue, saturation%, lightness%) — for example, hsl(217, 91%, 60%). No degree symbol needed for hue, but saturation and lightness require the % sign.

Can I add transparency to HSL?

Yes, use HSLA: hsla(217, 91%, 60%, 0.5) for 50% opacity. The alpha value ranges from 0.0 (transparent) to 1.0 (opaque).

Practical CSS Examples

Using CSS variables with HSL:

:root {
  --brand-h: 217;
  --brand-s: 91%;
  --brand-l: 60%;
}
.button {
  background: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
}

Creating a hover state by adjusting lightness:

.card {
  background: hsl(217, 91%, 60%);
}
.card:hover {
  background: hsl(217, 91%, 50%);
}

Other Free Color Tools

Search tools