How does HSL to RGB conversion work?
Starting from hue, saturation, and lightness, the formula computes two intermediate values based on L and S. It then applies a piecewise function three times — once offset by 120° for each channel — mapping the circular hue scale onto separate 0–1 linear values for red, green, and blue. Those values are then scaled to 0–255.
When would you convert HSL to RGB?
HSL is great for design decisions — picking a base hue and adjusting brightness or vibrancy. But many rendering contexts, image processing libraries, and low-level APIs require RGB. This converter bridges the gap: design in HSL, output in RGB.
Common Color Codes
Common web colours with their HEX, RGB, and HSL equivalents.
| Colour name | Hex code | RGB value | HSL value | |
|---|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| Grey | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) |
Colors with RGB, HEX, and HSL values
Frequently asked questions
Why do I get slightly different numbers when converting back?
Rounding HSL values to whole numbers loses fractional precision. A round-trip may land on ±1 per channel. Store original values when precision matters.
What is the difference between HSL and HSV?
In HSL, a fully saturated color at L = 50% is a pure hue. In HSV (HSB), V = 100% at full saturation is a pure hue. They model the RGB cube differently — most CSS and web tools use HSL.