Last updated: March 2026
How to Convert HSL to HEX
HSL (Hue, Saturation, Lightness) is an intuitive color model that makes it easy to create and modify colors, but most CSS codebases and design tools still use HEX codes. Converting HSL to HEX lets you take advantage of HSL's intuitive design while outputting the format your code requires.
To convert, paste your HSL value into the input field above. The tool accepts standard CSS syntax like hsl(210, 80%, 53%) and HSLA with alpha like hsla(210, 80%, 53%, 0.5). The HEX equivalent and nine other formats appear instantly.
Understanding the HSL Color Model
HSL describes color using three properties that map to how humans naturally think about color:
Hue (H) is the base color, expressed as a degree on the color wheel from 0 to 360. Red is at 0 (and 360), yellow at 60, green at 120, cyan at 180, blue at 240, and magenta at 300. Moving around the wheel gives you every possible hue.
Saturation (S) controls how vivid or muted the color is, from 0% (completely gray) to 100% (fully vivid). Reducing saturation creates softer, more subdued versions of any hue — perfect for backgrounds and muted UI elements.
Lightness (L) controls the brightness, from 0% (pure black) to 100% (pure white). At 50%, you get the purest expression of the hue. Values below 50% produce darker shades, and values above produce lighter tints.
Why Designers Prefer HSL
HSL is increasingly popular in modern CSS and design systems because it makes systematic color manipulation predictable and intuitive:
- Create shades and tints by adjusting only the lightness value. A button hover state might change from
hsl(210, 80%, 53%)tohsl(210, 80%, 45%)— same hue, just darker. - Build color scales by keeping hue and saturation constant while stepping through lightness values: 95%, 85%, 75%, 65%, 55%, 45%, 35%, 25%.
- Find complementary colors by adding 180 degrees to the hue. If your primary is
hsl(210, 80%, 53%), the complement ishsl(30, 80%, 53%). - Create analogous palettes by shifting hue by 30 degrees in each direction while keeping saturation and lightness the same.
HSL to HEX Conversion Process
The conversion from HSL to HEX is a two-step process. First, HSL values are converted to RGB using a standard algorithm that maps the cylindrical HSL coordinates to the cubic RGB color space. The hue determines the base color, saturation scales the color intensity, and lightness shifts the result between black and white. Second, each RGB channel (0-255) is converted to a two-digit hexadecimal value and combined into a six-character HEX code.
For example, hsl(210, 80%, 53%) first becomes approximately rgb(37, 99, 235), which then converts to #2563EB. Minor rounding may occur during the HSL-to-RGB step, but the visual difference is imperceptible.
Frequently Asked Questions
How do I convert HSL to HEX?
HSL to HEX conversion is a two-step process: first convert HSL to RGB using trigonometric formulas, then convert each RGB channel to a two-digit hexadecimal value. This tool handles the math automatically — just enter an HSL value like hsl(210, 80%, 53%) and the HEX code appears instantly alongside all other formats.
What do the H, S, and L values mean?
H stands for Hue (0-360 degrees on the color wheel, where 0 is red, 120 is green, and 240 is blue). S stands for Saturation (0-100%, where 0% is gray and 100% is the most vivid version of the hue). L stands for Lightness (0-100%, where 0% is black, 50% is the pure color, and 100% is white). Together they describe any color in an intuitive way.
Why is HSL better than HEX for color palettes?
HSL separates color properties into independent axes. To make a color lighter, increase L. To make it more muted, decrease S. To get a complementary color, add 180 to H. With HEX, achieving these effects requires converting to another format, modifying values, and converting back. HSL makes systematic color design much easier, which is why modern CSS and design systems increasingly prefer it.
Can I convert HSLA with transparency?
Yes. Enter an HSLA value like hsla(210, 80%, 53%, 0.5) and the tool will output an 8-digit HEX code with the alpha channel encoded in the last two characters. It also outputs the equivalent RGBA value for broader browser compatibility.
Is the HSL to HEX conversion exact?
The conversion involves floating-point math and rounding, so there can be minor differences of plus or minus one unit in the RGB channels. For example, hsl(210, 80%, 53%) might produce #2564EB or #2563EB depending on rounding. This is standard behavior and the visual difference is imperceptible — the colors appear identical to the human eye.