Colors
HEX to HSL Converter
Paste a HEX code or an hsl() value and read the other format instantly, with copy buttons and full alpha support. No account, no limits, and nothing leaves your browser.
Building a full palette?
The free color picker adds a screen eyedropper, color harmonies, a palette builder, and CSS, JSON, and Tailwind export. One free account, yours for life.
How it works
HEX to HSL in three steps
- 1Type or paste a color in either format, like #34d399 or hsl(158, 64%, 52%). Shorthand HEX and hsla() work too.
- 2Read both outputs instantly: the normalized HEX code and the CSS hsl() value, with alpha carried through when present.
- 3Click Copy next to the value you need, or open the full color picker to adjust hue, saturation, and lightness visually.
Common colors in HEX and HSL
The standard CSS colors, already converted. Notice how related colors share a hue and differ only in lightness — that regularity is the reason to work in HSL.
| 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%) |
What you get
Everything included, free
Two-way conversion
One input handles both directions. Paste HEX to get HSL, paste hsl() to get HEX, and the outputs update as you type.
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.
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.
FAQ
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
Keep the streak going
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.