HIFreeTools
ENES

HSL to RGB Color Converter

Convert any HSL color value to its RGB equivalent instantly, with hex code output and a live color preview — no sign-up required.

RGB
71, 180, 235
Hex
#47b4eb
R
71
G
180
B
235
CSS value
hsl(200, 80%, 60%)

Quick answer

To convert HSL to RGB, normalize the saturation and lightness to 0–1, then use the chroma-based piecewise formula to calculate each channel. For example, HSL(0, 100%, 50%) converts to RGB(255, 0, 0) — pure red. The hue determines which 60° sector of the color wheel is active, saturation controls intensity, and lightness shifts the color toward black or white. The resulting RGB values each range from 0 to 255 and can be expressed as a hex code for use in CSS or design tools.

Formula & method

C = (1 − |2L − 1|) × S
  • C — Chroma — the range of the color
  • L — Lightness (0 to 1)
  • S — Saturation (0 to 1)

Chroma (color intensity). L and S are normalized to 0–1.

X = C × (1 − |H/60 mod 2 − 1|)
  • X — Intermediate component value
  • H — Hue in degrees (0–360)
  • C — Chroma

Intermediate value for the second-largest RGB component.

m = L − C/2; (R, G, B) = (R' + m, G' + m, B' + m) × 255
  • m — Match value — shifts brightness to target lightness
  • R', G', B' — Preliminary RGB components from the H/C/X sector

Add the match value m to each preliminary channel, then scale to 0–255.

Examples

Example 1: Pure Red — HSL(0, 100%, 50%)
Input
H = 0°, S = 100%, L = 50%
Result
RGB(255, 0, 0) — #ff0000
Why
With H=0, S=1, L=0.5: C = (1−|2×0.5−1|)×1 = 1, m = 0.5−0.5 = 0. H falls in the 0–60° sector so R'=1, G'=0, B'=0. Final: R=255, G=0, B=0.
Example 2: Sky Blue — HSL(200, 80%, 60%)
Input
H = 200°, S = 80%, L = 60%
Result
RGB(71, 180, 235) — #47b4eb
Why
S=0.8, L=0.6: C=(1−|1.2−1|)×0.8=0.64, m=0.6−0.32=0.28. H=200 falls in 180–240° sector giving R'=0, G'=X≈0.436, B'=0.64. Adding m and scaling: R≈71, G≈180, B≈235.
Example 3: Olive Green — HSL(80, 50%, 40%)
Input
H = 80°, S = 50%, L = 40%
Result
RGB(119, 153, 51) — #779933
Why
S=0.5, L=0.4: C=(1−|0.8−1|)×0.5=0.4, m=0.4−0.2=0.2. H=80 falls in 60–120° sector giving G'=0.4, R'=X≈0.267, B'=0. Adding m and scaling: R≈119, G≈153, B≈51.
Example 4: Lavender Purple — HSL(270, 60%, 70%)
Input
H = 270°, S = 60%, L = 70%
Result
RGB(179, 133, 224) — #b385e0
Why
S=0.6, L=0.7: C=(1−|1.4−1|)×0.6=0.36, m=0.7−0.18=0.52. H=270 falls in 240–300° sector giving B'=0.36, R'=X≈0.18, G'=0. Adding m and scaling: R≈179, G≈133, B≈224.

Frequently asked questions

What is the difference between HSL and RGB?

RGB defines a color by its red, green, and blue light intensities (each 0–255). HSL describes the same color in human-readable terms: hue (the color wheel angle, 0–360°), saturation (color intensity, 0–100%), and lightness (brightness, 0–100%). Both represent the same color space; HSL is just more intuitive for designers.

How do I use HSL values in CSS?

CSS natively supports HSL with the syntax hsl(hue, saturation%, lightness%), for example hsl(200, 80%, 60%). You can also use the converted RGB values as rgb(71, 180, 235) or the hex code #47b4eb. All three forms produce the same color in the browser.

What does a lightness of 0% or 100% mean?

A lightness of 0% always produces black (RGB 0, 0, 0) regardless of hue or saturation, because no light is present. A lightness of 100% always produces white (RGB 255, 255, 255). The full range of hue and saturation only becomes visible at lightness values between these extremes.

What does a saturation of 0% mean?

When saturation is 0%, the color becomes a pure grayscale value determined entirely by lightness. For example, HSL(any, 0%, 50%) converts to RGB(128, 128, 128) — a medium gray. This is because with no saturation there is no chroma, so all three RGB channels are equal.

Is HSL the same as HSB or HSV?

No. HSL and HSB/HSV use similar hue and saturation concepts but define the third axis differently. HSB/HSV uses 'brightness' (maximum channel value), while HSL uses 'lightness' (average of max and min). A fully saturated, fully bright HSB color (S=100%, B=100%) is equivalent to HSL(h, 100%, 50%), not 100%.

Can I convert back from RGB to HSL?

Yes. To reverse the conversion, normalize RGB to 0–1, find the max and min channel values, compute lightness as (max+min)/2, then derive saturation from the chroma divided by (1−|2L−1|). Hue is calculated from which channel is dominant and the ratio of the other channels.

Sources & references

External references open in a new tab. We are independent and not affiliated with these organizations.

  • ✓ Free to use
  • ✓ No sign-up required
  • ✓ Runs entirely in your browser — nothing is uploaded.
  • ✓ Formula and method shown above
Last updated: How we calculateReport a correctionDisclaimer

Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.

Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.

Related tools

Embed this tool on your site

Free to embed, no sign-up. Paste this code where you want the hsl to rgb color converter to appear: