HEX to HSL Converter
HSL describes a color by hue (0–360°), saturation (0–100%), and lightness (0–100%), which maps far more intuitively to how designers think than raw HEX digits. Converting HEX to HSL first reads the RGB channels, then projects them onto the HSL cylinder.
Type a HEX code below to get its hsl() equivalent, ideal for building tints, shades, and accessible color systems by nudging lightness or saturation. The math runs entirely in your browser with no upload.
hsl(238, 100%, 71%)| HEX | Hue | Saturation | Lightness |
|---|---|---|---|
#ff0000 | 0° | 100% | 50% |
#00ff00 | 120° | 100% | 50% |
#0000ff | 240° | 100% | 50% |
#6c72ff | 237° | 100% | 71% |
#808080 | 0° | 0% | 50% |
#6c72ff→hsl(237, 100%, 71%)HEX is converted via RGB to the hue/saturation/lightness model.
Frequently asked questions
Why convert HEX to HSL?
HSL makes color relationships obvious: change the hue to shift the color, raise lightness for a tint, or lower saturation to mute it. That is much harder to reason about directly in HEX.
Is information lost converting HEX to HSL?
HSL values are rounded to whole numbers for readability, so converting back can differ by a single channel step. The visible color stays the same for practical purposes.
What does the hue degree represent?
Hue is an angle on the color wheel: 0° is red, 120° is green, and 240° is blue. Saturation and lightness then control how vivid and how light or dark that hue appears.
Does CSS support HSL directly?
Yes. Modern browsers accept hsl() and hsla() anywhere a color is expected, so you can often skip HEX entirely once you are comfortable with the model.