Translate HSL (Hue, Saturation, Lightness) colors into hexadecimal #RRGGBB codes suitable for CSS, design tokens, and graphics pipelines.
Conversion pipeline
- Hue (0–360°) selects the base color on the color wheel.
- Saturation (0–100%) controls chroma distance from gray.
- Lightness (0–100%) sets perceived brightness, with 50% as the pure hue midpoint.
The implementation converts HSL to RGB channels, clamps each channel to 0–255, then formats two hex digits per channel. Neutral colors (saturation 0) collapse to grays along the lightness axis.
When to use it
Move between designer-friendly HSL sliders and developer-friendly hex literals, document brand palettes, or teach how cylindrical color models relate to screen RGB.
Limitations
Output is sRGB hex without alpha. Extreme lightness values clip channel math to #000000 or #FFFFFF. Perceptual uniformity of HSL is imperfect — two hues with the same saturation and lightness can appear different in brightness to the human eye.