Convert HSL to RGB

Convert hue, saturation and lightness to RGB and hex.

Hue244°

Saturation58%

Lightness59%

Alpha100%

#625AD3

RGB

rgb(98, 90, 211)

Hex

#625AD3

HSL

hsl(244, 58%, 59%)

CSScss

/* Both declarations produce the same colour */
color: hsl(244, 58%, 59%);
color: rgb(98, 90, 211);

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

1
Set hue, saturation and lightnessDrag the sliders or type values.
2
Read RGB and hexBoth update instantly.
3
Copy 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.