HSL to RGB

Convert HSL colour values to RGB and HEX using interactive sliders. Live preview and copy buttons for each output.

color hsl rgb hex convert css
Free Client-Side Private
H °
S %
L %
🔒 This tool runs entirely in your browser — your files are never uploaded to any server.

HSL to RGB converts Hue, Saturation and Lightness values into the Red, Green and Blue channel numbers used by screens, CSS and image formats. Adjust the three sliders or type values directly — the HEX code, RGB string and live colour preview all update instantly in your browser.

What is HSL?

HSL models colour the way humans naturally think about it:

  • Hue is the base colour expressed as a degree on a colour wheel (0°–360°). Red sits at 0°, green at 120° and blue at 240°.
  • Saturation controls vividness. 0% is a neutral grey; 100% is the most vivid version of that hue.
  • Lightness controls brightness. 0% is always black; 100% is always white; 50% gives the pure colour.

How the conversion works

Given HSL H=217, S=91, L=60:

  1. Normalise: S′=0.91, L′=0.60
  2. Chroma: C = (1 − |2 × 0.60 − 1|) × 0.91 = 0.728
  3. H′ = 217 / 60 = 3.617; X = C × (1 − |3.617 mod 2 − 1|) ≈ 0.449
  4. m = L′ − C/2 = 0.236
  5. Assign R′, G′, B′ by sector, then multiply by 255 → R=59, G=130, B=246 → #3b82f6

When would you use this tool?

You may receive HSL colour specifications from a CSS stylesheet or a designer working in Figma, and need to translate them into RGB integers or a HEX code for an image editor, an API or a PDF export that does not accept HSL directly. This tool gives you the exact values ready to copy.

Limitations

The conversion assumes fully opaque colours. An alpha channel from hsla() is not supported — add the alpha component to the RGB output manually if needed. RGB channel values are rounded to the nearest integer; a ±1 difference from floating-point rounding is normal.

FAQ

H=0 and H=360 give the same colour — is that right?

Yes. The hue wheel is circular, so 0° and 360° both represent red. Setting the slider to 360 produces identical output to 0.

Why does S=0 always produce grey regardless of hue?

Zero saturation removes all colour information. The RGB channels become equal, resulting in a neutral grey whose brightness is determined solely by L.

The HEX output differs by 1 from my design tool. Why?

Integer rounding during the intermediate floating-point conversion can cause a ±1 difference in any channel. This is a normal artefact and has no visible effect on the rendered colour.

Can I enter fractional HSL values?

The sliders and number inputs work with integers. For fractional precision (e.g. H=217.5°) you would need to apply the formula manually; for all practical design uses, integer precision is more than sufficient.

Report an issue