HSL to HEX Converter

HSL-to-HEX conversion is the operation that finalizes a color chosen or generated in the HSL color model into a compact, shareable format usable anywhere HEX is accepted — CSS stylesheets, design tool color pickers, brand guides, and configuration files. The direction of this conversion reflects a common design workflow: colors are selected and varied in HSL because the dimensions are intuitive (hue for identity, saturation for vividness, lightness for brightness), and then output as HEX because that is the format most tools and codebases expect. This converter is the bridge between the design phase and the implementation phase.

The conversion algorithm computes intermediate RGB values from the HSL triplet using the standard CSS Color Module 3 formula. The hue is first normalized to the 0–360 range using modular arithmetic so that values like 380 or -20 are handled correctly. Saturation and lightness are divided by 100 to normalize them to the 0–1 range. The chroma C is computed as (1 - |2L - 1|) × S, a secondary component X is computed from the position of the hue within its 60-degree sector, and a lightness offset m is computed as L - C/2. The hue sector (0–60, 60–120, and so on up to 300–360) determines which of six formulae assigns C, X, and 0 to the three R1, G1, B1 pre-offset values. Finally, each channel is scaled by adding m and multiplying by 255, rounding to the nearest integer, and formatting as a two-digit hex string.

Design systems that generate systematic color palettes using HSL arithmetic need this conversion as a final step. A token generator might define a base hue of 220 and then compute a range of lightness values from 95% (near-white) down to 10% (near-black) to produce a ten-step color scale. Each step is internally represented as an HSL triplet, but the actual design token stored in a JSON or CSS variables file should be in HEX for maximum compatibility. Running each generated HSL through this converter produces the palette in the format needed for the design token system, without any manual color picking.

CSS custom properties (CSS variables) defined in HSL allow for runtime lightness or saturation adjustments using calc(), making them popular in theming systems with multiple color modes. However, some target environments — email clients, older embedded browsers, SVG renderers, and some CSS preprocessor pipelines — do not support the hsl() CSS function. In those cases, the design needs to export the computed HEX values for each theme variant rather than relying on hsl() at render time. This converter allows a developer to compute the HEX output for each HSL combination that the theme will use (for example, primary at lightness 40%, 50%, and 60%) and hard-code those as fallback HEX values in the stylesheet.

Color accessibility workflows also use HSL-to-HEX conversion. Tools that compute WCAG contrast ratios typically operate on sRGB linear values derived from HEX or RGB inputs, not from raw HSL. When designing an accessible color palette in HSL — systematically adjusting lightness to achieve the required 4.5:1 contrast ratio — the HSL values that pass the accessibility check need to be exported as HEX for integration into a component library or design token system. Converting the final approved HSL values to HEX at the end of the accessibility review process ensures the palette is documented in the format needed by developers and design tools while preserving the systematic HSL logic used to derive it.