CSS HSL to Hex Converter

About this calculator

HSL (hue, saturation, lightness) and hex are two different ways of writing the same sRGB color in CSS — HSL describes a color the way a person intuitively thinks about it (which color, how vivid, how light or dark), while hex encodes the raw red, green, and blue channel values as a six-digit base-16 number. Converting between them requires first turning the HSL values into RGB using the standard HSL-to-RGB conversion formulas, then formatting each channel as a two-digit hexadecimal pair.

This calculator does that conversion automatically, taking hue (0 to 360 degrees), saturation, and lightness percentages and returning the equivalent uppercase hex code. It's an everyday utility for front-end developers and designers who pick colors intuitively on an HSL slider — because adjusting lightness or saturation independently is far more predictable than editing hex digits — but need the hex form for a design tool, a CSS variable, or a codebase that standardizes on hex.