HSL to RGB conversion formula
Formula
Use hue sector (0–6) with chroma and X offset formulas per W3C CSS Color Module.
Variables
- R, G, B
- sRGB channels (0–255 or 0–1 normalized)
- H, S, L
- Hue (degrees), saturation and lightness (0–1) in HSL
- L
- Relative luminance (WCAG) or lightness in HSL/OKLCH
FAQ
- Is HSL to RGB conversion formula accurate for print workflows?
- Screen RGB and print CMYK use different gamuts. Treat conversions as approximate proofs; calibrate with ICC profiles for commercial print.
- Can I use this formula in CSS?
- Modern CSS supports color-mix(), oklch(), and lab() for many operations. For complex pipelines, compute in JavaScript and export CSS variables.
- Does Color DevByte upload my colors?
- No. Formula reference pages are static documentation; interactive tools run 100% client-side in your browser.
Overview
Convert HSL cylindrical coordinates back to sRGB for CSS output.
Color DevByte documents this formula for developers, designers, and accessibility reviewers who need reproducible color math without sending data to a server.
Use the linked color tools to apply this formula interactively with live preview and multi-format export.
When to use this formula
Apply the hsl to rgb conversion formula when building design tokens, validating WCAG contrast, or automating color pipelines in CSS, Tailwind, or design-system JSON.
For production UI, always verify results with a contrast checker or visual preview — edge cases in gamma correction and gamut mapping can shift outcomes.
Implementation notes
Browser-based tools should linearize sRGB before luminance or ΔE calculations.
Prefer OKLCH or LAB interpolation for gradients and themes to avoid grayish midpoints common in RGB blends.