Enter red, green and blue values from 0–255 and get the equivalent HSL — hue, saturation, and lightness — instantly, with a live colour swatch you can copy as a CSS hsl() value.
How it works
The converter normalises each RGB channel to the 0–1 range and finds the maximum and minimum of the three. Their average gives lightness. The difference between them (the chroma), divided relative to lightness, gives saturation. The hue is determined by which channel is largest and by how far the other two differ, mapped onto the 0–360° colour wheel. This is the standard RGB-to-HSL conversion; the tool rounds hue to a whole degree and saturation and lightness to whole percents.
Example
Convert rgb(59, 130, 246):
- Normalised max = 246/255, min = 59/255
- Lightness ≈ 60%
- Saturation ≈ 91%
- Hue ≈ 217°
- Result:
hsl(217, 91%, 60%)
| RGB | HSL |
|---|---|
| rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| rgb(59, 130, 246) | hsl(217, 91%, 60%) |
Why HSL is easier to work with than RGB for design
RGB describes colour in terms of the intensity of three light primaries, which does not map naturally to how designers think. To lighten a colour in RGB you must increase all three channels proportionally — but the proportion that looks right varies for every hue. To shift a colour from vivid to muted you must move all three channels closer to each other, by an amount that is hard to predict without experimentation.
HSL externalises these as independent controls:
- Hue — turn the wheel to change the colour without affecting how vivid or light it is
- Saturation — reduce from 100% toward 0% to desaturate toward grey without changing lightness
- Lightness — adjust from 0% (black) through the native colour to 100% (white)
In CSS, hsl() is natively supported in all modern browsers. It is especially useful for
generating colour palettes programmatically — for example, by keeping hue and saturation constant
while stepping lightness from 10% to 90% to generate a tonal scale.
The hue angle: reading the colour wheel
Hue is measured in degrees around a colour wheel:
| Hue range | General colour region |
|---|---|
| 0° (or 360°) | Red |
| 30° | Orange |
| 60° | Yellow |
| 90°–120° | Yellow-green to green |
| 150°–180° | Green to cyan |
| 210°–240° | Cyan to blue |
| 270° | Blue-purple |
| 300°–330° | Magenta to pink |
Knowing these ranges helps when fine-tuning hue relationships. A pair of colours 180° apart are complementary; colours within about 30° of each other form an analogous group.
Greys, blacks, and whites: saturation is always 0
Any colour where R = G = B (regardless of value) will have 0% saturation in HSL. The hue value is mathematically undefined for pure grey and is reported as 0° here, but that value carries no perceptual meaning. Only lightness varies: rgb(0, 0, 0) → hsl(0, 0%, 0%), rgb(128, 128, 128) → hsl(0, 0%, 50%), rgb(255, 255, 255) → hsl(0, 0%, 100%).
The whole conversion runs in your browser — nothing is uploaded.