HEX to HSL Converter

HSL stands for hue, saturation and lightness. It describes a color by its angle on the color wheel plus how vivid and how bright it is, which many people find more intuitive than a hex triplet. It is fully supported in CSS as the hsl() function.

Hue is an angle from 0 to 360 degrees, where 0 is red, 120 is green and 240 is blue. Saturation from 0 to 100 percent sets how vivid the color is, and lightness from 0 to 100 percent runs from black through the pure hue to white.

Six-digit hex like #3b82f6 and three-digit shorthand like #0f0, with or without the leading hash. Shorthand is expanded by doubling each digit, so #0f0 becomes #00ff00 before conversion.

Hue, saturation and lightness are each rounded to whole numbers so the output is short and pastes cleanly into CSS. The change is well under one unit and is not visible on screen. For example #3b82f6 resolves to hsl(217, 91%, 60%).

Grays are achromatic, so hue and saturation are both reported as 0 and only lightness changes. A mid gray like #808080 converts to hsl(0, 0%, 50%), since there is no dominant color to give it a hue.

No. It handles the color channels only, so 8-digit hex with an alpha channel is rejected as invalid. Enter a 3- or 6-digit code and add any transparency separately in your CSS using hsla() or a slash alpha value.

The tool shows an 'Invalid HEX color' message instead of a result until the code is a valid 3- or 6-digit hex. It also displays the matching RGB and hex values in the grid so you can double-check the color you meant.

No. The conversion runs entirely in your browser, so your color values never leave your device.

Use the HSL to HEX converter for the reverse trip. The math is exact in both directions apart from the whole-number rounding, so a round trip usually lands on the same hex code.