What it does
The three colour notations you meet in CSS — #RRGGBB, rgb(r, g, b) and hsl(h, s%, l%) — are three ways of writing the same colour. Change any one of the three fields above and the other two update to match, so you can convert freely in either direction. A live swatch reflects the current colour as you type.
How it works
Hex is shorthand for RGB. Each pair of hex digits is a channel value in the range 0-255: #2563eb is 0x25 = 37 red, 0x63 = 99 green, 0xeb = 235 blue. Short-form #RGB is expanded by doubling each digit — #f00 becomes #ff0000.
RGB is the sRGB colour space, mixing red, green and blue channels additively. Each channel is an integer 0-255.
HSL parameterises the same colour differently: hue is an angle on the colour wheel (0 = red, 120 = green, 240 = blue), saturation is how vivid the colour is, and lightness runs from 0% (black) through 50% (the pure hue) to 100% (white).
Converting RGB to HSL: normalise each channel to 0-1, take the maximum and minimum, then L = (max + min) / 2. Saturation is (max - min) / (max + min) when L ≤ 0.5, or (max - min) / (2 - max - min) when it is greater. Hue is derived from whichever channel is the maximum, scaled onto a 360-degree circle. HSL is stored here as integers, which means a tiny amount of precision is lost — see the FAQ.
Worked example
The same colour written three ways:
hex #2563eb
rgb rgb(37, 99, 235)
hsl hsl(221, 83%, 53%)All three describe ToolHare's brand blue. Hex is the compact form you paste into a stylesheet; RGB is the same numbers you would set in a graphics tool; HSL is the one to reach for when you want a related colour — nudge the hue for a complementary accent, drop the lightness for a darker shade.
When you would use each
- Hex — stylesheets, design tokens, hand-off to developers. It is compact and unambiguous.
- RGB — graphics tools, image editors, canvas code. It matches how displays actually mix light.
- HSL — deriving related colours by adjusting one axis. Shift the hue for a complementary accent, keep hue and saturation but lower the lightness for a darker shade of the same colour, or drop saturation to grey it out.
Frequently asked
Does this handle alpha (transparency)?
Not in this version. The tool works with opaque colours — #RRGGBB, rgb(r, g, b) and hsl(h, s%, l%). Support for #RRGGBBAA, rgba(...) and hsla(...) may follow.
What is the difference between HSL and HSV?
Both split a colour into hue, saturation and a brightness axis, but they define brightness differently. In HSL, lightness runs from black to white through the pure hue at 50%. In HSV, value runs from black to the pure hue at 100%, and pushing further toward white is done by dropping saturation. CSS uses HSL; this tool uses HSL.
Why does the converted colour drift by a unit when I convert back?
HSL is a lossy re-parameterisation of RGB when stored as integers. Two nearby RGB values can round to the same rounded HSL, so converting RGB → HSL → RGB can shift a channel by one or two units. Hex ↔ RGB is exact. If you need a fixed colour, hold on to the hex or RGB form.
Why "colour" with a u?
ToolHare is a UK site, so we default to British spelling in prose. The CSS property is still color — that is a syntax term and does not change.
Is my input sent anywhere?
No. All conversion happens in your browser. Nothing you type leaves your device.
See how we build and verify our tools.