Free tool · Colors

HEX to HSL Converter

Paste a HEX code or an hsl() value and read the other one instantly.

Open the full color picker How it works

This converter is free with no sign-in. The full color picker is free with a Bravely account.

Both directions
Alpha support
No sign-in

HEX or HSL

Try

#34d399 = hsl(158, 64%, 52%)

Common colors in HEX and HSL

The standard CSS colors you reach for most, already converted.

Color	HEX	HSL
White	#FFFFFF	hsl(0, 0%, 100%)
Black	#000000	hsl(0, 0%, 0%)
Red	#FF0000	hsl(0, 100%, 50%)
Orange	#FFA500	hsl(39, 100%, 50%)
Yellow	#FFFF00	hsl(60, 100%, 50%)
Lime	#00FF00	hsl(120, 100%, 50%)
Green	#008000	hsl(120, 100%, 25%)
Cyan	#00FFFF	hsl(180, 100%, 50%)
Blue	#0000FF	hsl(240, 100%, 50%)
Navy	#000080	hsl(240, 100%, 25%)
Magenta	#FF00FF	hsl(300, 100%, 50%)
Purple	#800080	hsl(300, 100%, 25%)
Silver	#C0C0C0	hsl(0, 0%, 75%)
Gray	#808080	hsl(0, 0%, 50%)
Maroon	#800000	hsl(0, 100%, 25%)
Teal	#008080	hsl(180, 100%, 25%)

How it works

HEX to HSL in three steps

1
Paste a color
HEX or hsl(), with shorthand and alpha.
2
Read both
The HEX code and the CSS hsl() value, live.
3
Copy it
One click, or tune it in the full color picker.

What you get

Everything included, free

Two-way conversion

One input handles both directions.

Alpha support

Eight-digit HEX codes convert to hsla() and back, so transparency survives the round trip.

Copy-ready CSS

Outputs are exact CSS syntax, ready to paste into a stylesheet without reformatting.

Shorthand friendly

Three-digit codes like #fa0 expand automatically to their six-digit form before converting.

Live swatch preview

A preview swatch shows the parsed color as you type, so a typo is obvious before you copy anything.

Good to know

How the HEX to HSL conversion works

The conversion goes through RGB. First the HEX pairs become red, green, and blue channels from 0 to 255, which are scaled down to the 0-1 range. Call the largest channel max and the smallest min. Lightness is their midpoint: (max + min) / 2. Saturation measures how far apart they are, scaled so it stays meaningful at every lightness: (max - min) / (1 - |2L - 1|). Hue depends on which channel is the max; the formula measures how far around the 360-degree wheel the color sits, with red at 0, green at 120, and blue at 240.

Worked example: #34d399 has channels 52, 211, and 153, or 0.204, 0.827, and 0.6 after scaling. Lightness is (0.827 + 0.204) / 2, about 52%. The range is 0.624, giving saturation of about 64%. Green is the dominant channel and the blue side pulls slightly ahead of red, landing the hue at 158 degrees, so the result is hsl(158, 64%, 52%). The reverse conversion rebuilds RGB from the hue angle and then formats the channels back into base-16 pairs.

Why designers adjust colors in HSL

A color ramp, a hover state, and a dark-mode surface are all the same question: keep the hue, change the intensity. In HSL that is a single dial. Drop lightness ten points for a pressed button, halve the saturation for a disabled state, or step lightness from 95% down to 20% to build a full tint-and-shade scale from one brand hue. The converter gives you the HSL form of any HEX color so you can make those edits deliberately, then convert the results back to HEX for your stylesheet.

Frequently asked questions

What is HSL?

HSL describes a color by hue, saturation, and lightness. Hue is an angle on the color wheel from 0 to 360 degrees, saturation is how vivid the color is from 0% (gray) to 100% (pure), and lightness runs from 0% (black) through the pure color at 50% to white at 100%.

How is HEX converted to HSL?

The HEX pairs are first read as red, green, and blue from 0 to 255, then those channels are scaled to 0-1. Lightness is the average of the largest and smallest channels, saturation comes from how far apart they are, and hue comes from which channel dominates. For #34d399 that works out to hsl(158, 64%, 52%).

When should I use HSL instead of HEX?

Use HSL when you plan to modify a color. A hover state, a disabled tint, or a dark-mode variant is usually the same hue with lightness or saturation shifted a few points, which is a one-number edit in HSL and a fresh guess in HEX. Keep HEX for storing and sharing the final values.

Does CSS support HSL?

Yes, in every modern browser. You can write hsl(158, 64%, 52%) anywhere a color is accepted, and add transparency either as hsla() or with the slash syntax, hsl(158 64% 52% / 0.5).

What is the difference between HSL and HSV?

Both start with the same hue and saturation idea but scale brightness differently. In HSL, 100% lightness is always white; in HSV, 100% value is the brightest, purest version of the hue. CSS uses HSL, while many pick surfaces in design tools are built on HSV geometry.

Do I need an account?

No. This converter is free for everyone with no sign-in, and the conversion runs entirely in your browser. The full color picker it links to uses a free Bravely account for its one-time lifetime claim and palette exports.

More free tools

While you’re here

From the same studio

Bravely Studios builds nine cross-platform desktop utilities: screenshots, PDF signing, remote desktop and more, with one plan that unlocks all of them. Free tools are how we say hello.