HSL to HEX Converter

HSL stands for Hue, Saturation, and Lightness. Hue is the color type on a 0-360 degree wheel (0=red, 120=green, 240=blue). Saturation (0-100%) controls color intensity — 0% is gray, 100% is fully vivid. Lightness (0-100%) controls brightness — 0% is black, 50% is the pure color, 100% is white.

HSL is more intuitive for humans. Need a darker blue? Lower the lightness. Need a more muted red? Lower the saturation. With HEX or RGB, achieving the same adjustments requires changing multiple channel values simultaneously. HSL makes color manipulation predictable and logical.

HSL to HEX conversion first converts HSL to RGB using a standard algorithm that maps hue sectors to channel contributions, then converts each RGB channel (0-255) to a two-digit hexadecimal value. The process is mathematically lossless — converting back and forth yields the same color.

Yes — all modern browsers support hsl() and hsla() in CSS. You can use hsl(210, 80%, 50%) directly in stylesheets. HSL is particularly powerful with CSS custom properties — define a brand color's hue as a variable, then create the entire scale by varying saturation and lightness.

HSLA adds an Alpha channel (0 to 1) for transparency. hsl(210, 80%, 50%) is fully opaque, while hsla(210, 80%, 50%, 0.5) is 50% transparent. In modern CSS, you can also write hsl(210 80% 50% / 0.5) using the newer space-separated syntax with a slash before the alpha.