RGB to HSL Converter
Type a RGB value and get HSL straight away. Everything runs in your browser — nothing is sent to a server.
How the conversion works
Normalise the three channels to 0–1 and find the maximum and minimum. Lightness is (max+min)/2, saturation is their difference adjusted for lightness, and hue depends on which channel is largest.
RGB
RGB describes color the way a screen makes it: three lights added together, each from 0 to 255. All three at zero is black; all three at 255 is white. Because it mirrors the hardware it is exact and lossless, but it is hard to reason about — nudging a color slightly warmer means changing two or three numbers at once with no obvious direction.
HSL
HSL rearranges the same color into axes people can actually steer: hue as an angle from 0 to 360°, saturation as a percentage, lightness as a percentage. Want a lighter version of the same color? Raise the lightness and leave the rest alone. The catch is that its lightness is arithmetic, not perceptual — yellow at 50% lightness looks far brighter than blue at 50%.
RGB to HSL, step by step
Worked through with #FF6347. Every number comes from the same engine the converter above uses.
-
Scale each channel to 0–1
R 1 G 0.388 B 0.278 -
Largest and smallest channel
max 1 min 0.278 max−min 0.722 -
Lightness
L = (max+min)/2 = 0.639 = 63.9% -
Saturation
S = (max−min)/(1−|2L−1|) = 100% -
Hue angle
H = 9.1° -
Result
hsl(9, 100%, 64%)
RGB to HSL examples
| Color | RGB | HSL |
|---|---|---|
| Red | rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
| Tomato | rgb(255, 99, 71) |
hsl(9, 100%, 64%) |
| Orange | rgb(255, 165, 0) |
hsl(39, 100%, 50%) |
| Gold | rgb(255, 215, 0) |
hsl(51, 100%, 50%) |
| Limegreen | rgb(50, 205, 50) |
hsl(120, 61%, 50%) |
| Teal | rgb(0, 128, 128) |
hsl(180, 100%, 25%) |
| Dodgerblue | rgb(30, 144, 255) |
hsl(210, 100%, 56%) |
| Royalblue | rgb(65, 105, 225) |
hsl(225, 73%, 57%) |
| Blueviolet | rgb(138, 43, 226) |
hsl(271, 76%, 53%) |
| Hotpink | rgb(255, 105, 180) |
hsl(330, 100%, 71%) |
Common questions
Which channel decides the hue?
The largest one. If red is highest the hue sits near 0°, green near 120°, blue near 240°; the other two channels then pull it away from that anchor.
Why is saturation 100% for a color that looks pale?
Saturation in HSL is measured relative to the lightness, not in absolute terms. A very light color can be fully saturated for how light it is, which is why pastels often read as 100%.
Is this the right conversion for building a tint scale?
It works, but OKLCH is a better fit. Stepping HSL lightness produces steps that look uneven across hues, while equal steps in OKLCH lightness look evenly spaced.