HSL to RGB
Convert HSL to RGB and HEX, or RGB back to HSL.
How to use HSL to RGB
Convert HSL to RGB and HEX, or RGB back to HSL, with copy-to-clipboard.
Open HSL to RGB on toolpermarket — the form is ready, so type your numbers and read the result.
In the Hue field, set the base color on the 0 to 360 degree wheel, where 0 is red and 120 is green. Hue alone decides the color family; the other two sliders decide how strong and light it is.
In the Saturation field, move 0 to 100 percent from gray to fully vivid. Low saturation gives muted, professional tones; high saturation gives punchy ones.
In the Lightness field, move 0 to 100 percent from black through the color to white. Around 50 percent lightness keeps the hue most recognizable.
Press Convert to compute the result. The output appears immediately below the form. Edit a value and press the button once more to see the updated answer.
Read the result and use it as needed. If the number looks off, re-check your inputs and run it again — the math is deterministic, so the same entries always return the same answer.
Worked example. HSL(203, 50%, 45%) converts to RGB(57, 122, 172) and hex 397aac — the lake-blue brand color.
Tips for accurate results.
Think hue first, then saturation, then lightness — that order matches how the eye reads color.
Use HSL when you want to build a coherent palette by shifting only the hue.
Lightness near 0 or 100 collapses to black or white regardless of hue.
When to use HSL to RGB. Generating a family of tints from one base hue. Theming a UI where you shift hue but keep feel constant. Understanding why a color looks washed out or too dark.
When you actually reach for this
- You think in hue/saturation/lightness and need RGB for code.
- You want to nudge lightness without guessing the RGB math.
Where this tool stops being accurate
- HSL is just another notation; the conversion is exact and changes no visual color.
- HSL makes "lighten" or "shift hue" intuitive, but the final pixel is identical to the matching RGB.
Frequently asked questions
Why convert HSL to RGB at all?
HSL is comfortable for humans to reason about — hue, saturation, lightness map to how we perceive color — while RGB is what CSS, canvases and most code actually consume. Converting lets you pick intuitively and then ship in the format your project requires.
Why does my color look gray at low saturation?
Saturation controls how much pure color is present versus gray. At 0 percent the color is fully gray regardless of hue, which is expected behavior and useful when you want neutral, understated tones.
Can I go from RGB back to HSL here?
This specific page converts HSL to RGB. For the reverse direction, the Hex to RGB and related color tools on the site cover other conversions, and the color picker shows all three notations side by side as you adjust.
Why use HSL instead of RGB?
HSL separates shade (lightness) from color (hue) and intensity (saturation), so tweaking brightness is easier than juggling three RGB numbers.