HSL to RGB converter
Enter a colour as hue, saturation and lightness and get the equivalent RGB
value — plus the matching hex code — instantly, with a live swatch. HSL makes it
easy to dial in a colour by feel; this tool gives you the rgb() and #rrggbb
forms you need for CSS and design software.
How it works
The converter applies the standard HSL-to-RGB algorithm. It normalises hue to 0–1 of the way round the wheel and saturation and lightness to 0–1, then computes a chroma value C = (1 − |2L − 1|) × S (how colourful the result is), an intermediate X based on the hue position, and a match value m = L − C/2 that lifts everything to the right lightness. Depending on which sixth of the colour wheel the hue falls in, C, X and 0 are assigned to red, green and blue, then each channel has m added and is multiplied by 255 and rounded to a 0–255 integer.
Example conversions
For hsl(217, 91%, 60%):
- The hue (217°) lands in the blue-cyan region, S = 0.91, L = 0.60
- C ≈ 0.728, m ≈ 0.236
- Result: roughly rgb(59, 130, 246) = #3b82f6 — the familiar Tailwind blue-500
| HSL | RGB | Hex | Description |
|---|---|---|---|
| hsl(0, 100%, 50%) | rgb(255, 0, 0) | #ff0000 | Pure red |
| hsl(120, 100%, 50%) | rgb(0, 255, 0) | #00ff00 | Pure green |
| hsl(240, 100%, 50%) | rgb(0, 0, 255) | #0000ff | Pure blue |
| hsl(217, 91%, 60%) | rgb(59, 130, 246) | #3b82f6 | Tailwind blue-500 |
| hsl(0, 0%, 50%) | rgb(128, 128, 128) | #808080 | Mid grey |
| hsl(0, 0%, 0%) | rgb(0, 0, 0) | #000000 | Black |
| hsl(0, 0%, 100%) | rgb(255, 255, 255) | #ffffff | White |
Why use HSL instead of RGB directly?
HSL maps more naturally to how designers and humans think about colour than RGB does. In RGB, making a colour lighter, darker, or more muted requires adjusting all three channels simultaneously in ways that are hard to predict mentally. In HSL:
- Hue spins round the colour wheel — 0° is red, 120° is green, 240° is blue
- Saturation controls vividness — 0% is grey, 100% is the fully saturated version of the hue
- Lightness sets brightness — 0% is black, 100% is white, 50% is the purest expression of the colour
Adjusting a palette in HSL is therefore intuitive: to make all your brand colours a shade lighter, increase L by the same amount across every hue. To create a muted, desaturated variant for disabled states or backgrounds, lower S. These adjustments would require complex RGB arithmetic to achieve systematically.
HSL vs. HSV/HSB — a common source of confusion
HSL and HSV (also called HSB — hue-saturation-brightness) both use hue and saturation but define the third axis differently:
- In HSL: lightness 50% gives the fullest, purest colour; lightness 100% is always white regardless of hue and saturation
- In HSV/HSB: value 100% gives the purest colour; value 0% is always black
This means the same numbers in HSL and HSV produce different colours. Photoshop’s colour picker uses HSB; CSS uses HSL. Always check which model your tool expects before pasting values.
When you need hex or rgb() instead
CSS accepts HSL natively via hsl(217, 91%, 60%) or the new space-separated form hsl(217 91% 60%), so for modern CSS you may not need to convert at all. However, some tools — older design software, SVG attributes, configuration files, certain charting libraries — expect #rrggbb hex or rgb(r, g, b) format. This converter gives you all three so you can paste whichever format the target requires.
Everything runs in your browser — nothing is uploaded.