Convert HSL to RGB
Convert hue, saturation and lightness to RGB and hex.
HSL to RGB Converter
Developer tool running locally in browser
What does HSL to RGB Converter do?
Convert HSL values back to RGB and hex, with sliders that let you dial in a colour by feel rather than by number. Useful when a design system specifies colours in HSL but a tool needs hex.
How to Use HSL to RGB Converter
- 1Set hue, saturation and lightnessDrag the sliders or type values.
- 2Read RGB and hexBoth update instantly.
- 3Copy the format you needOne tap each.
Key Features
- Interactive hue, saturation and lightness sliders
- RGB and hex output together
- Alpha channel supported
- Live swatch with a readable text colour picked automatically
- Accepts a pasted hsl() string
Frequently Asked Questions
How does HSL become RGB?
Chroma is derived from saturation and lightness, the hue angle selects which channels carry it, and a lightness offset is added to all three. The tool shows the intermediate values if you want to follow along.
Why does saturation do nothing at 0% or 100% lightness?
Because those are pure black and pure white. At the extremes there is no chroma to saturate, so the hue and saturation values have no visible effect.
What hue is a given colour?
Roughly: 0 red, 30 orange, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta. The slider is colour-filled so you can see it directly.
Does converting lose precision?
Slightly. RGB channels are integers, so a fractional HSL value rounds to the nearest of 256 levels. Converting back may differ by a fraction of a degree in hue.
Input is processed in your browser and never transmitted. That said, treat any web page as untrusted for live production secrets — rotate anything you paste anywhere.