HSL to RGB Converter
HSL (Hue, Saturation, Lightness) is a colour model that separates colour into three intuitive dimensions: hue (the colour itself, 0-360 degrees), saturation (colour intensity, 0-100%), and lightness (brightness, 0-100%). This model is more intuitive for designers than RGB because you can easily adjust brightness or intensity while preserving the colour. Converting HSL to RGB (red, green, blue) values is necessary for displaying colours on digital screens, as displays work with RGB light. This converter transforms HSL values to RGB and hexadecimal colour codes instantly, and displays a live colour preview swatch. It also shows the reverse conversion from RGB back to HSL. HSL is particularly useful for creating colour schemes and gradients: you can pick a hue, adjust saturation and lightness to create variations, and the converter handles the mathematical transformation to RGB.
HSL colour wheel reference
| Hue | Colour | HSL Example |
|---|---|---|
| 0 degrees | Red | HSL(0, 100%, 50%) |
| 60 degrees | Yellow | HSL(60, 100%, 50%) |
| 120 degrees | Green | HSL(120, 100%, 50%) |
| 180 degrees | Cyan | HSL(180, 100%, 50%) |
| 240 degrees | Blue | HSL(240, 100%, 50%) |
| 300 degrees | Magenta | HSL(300, 100%, 50%) |
HSL saturation and lightness effects
| Lightness | Effect | Example |
|---|---|---|
| 0% | Black | HSL(0, 100%, 0%) |
| 25% | Dark shade | HSL(0, 100%, 25%) |
| 50% | Full colour | HSL(0, 100%, 50%) |
| 75% | Light shade | HSL(0, 100%, 75%) |
| 100% | White | HSL(0, 100%, 100%) |
HSL to RGB converter: frequently asked questions
What is HSL?
HSL (Hue, Saturation, Lightness) is a colour model that represents colours in a way more intuitive to humans. Hue (0-360 degrees) is the colour itself (red, green, blue, etc.). Saturation (0-100%) is the intensity or purity of the colour. Lightness (0-100%) is the brightness, from black (0%) to white (100%).
When should I use HSL?
HSL is useful when designing colour schemes and gradients because you can easily adjust brightness and saturation while keeping the hue constant. For example, to create a lighter shade of red, increase the lightness value. HSL is more intuitive than RGB or hex for design work.
How do I convert HSL to RGB?
The conversion involves mathematical formulas. First, calculate intermediate values based on saturation and lightness. Then apply different formulas depending on the hue value to compute red, green, and blue. Most tools and programming languages have built-in functions for this conversion.
What is the relationship between HSL and RGB?
Both HSL and RGB represent the same colours, just using different models. RGB describes colours as combinations of red, green, and blue light, while HSL describes them by their hue, saturation, and lightness. You can convert freely between them without losing information.
What hue values correspond to which colours?
Red is 0 degrees, yellow is 60 degrees, green is 120 degrees, cyan is 180 degrees, blue is 240 degrees, and magenta is 300 degrees. Values wrap around, so 360 is red again.
Official sources
- W3C: CSS Colour Module Level 3.
- MDN: CSS colour values.
Reviewed by the CalculatorHub team, edited by James Graham, 14 June 2026. See our methodology.