Color converter
DevNo. 03 / 24approved
One colour, three languages. Pick it, drag it or type it — HEX, RGB and HSL all stay in sync, with a swatch that shows exactly what you're getting.
hue 0° and 360° are the same red — colour wheels are surprisingly round.
work surface
Math, not advice — results are indicative. Read the disclaimer.
most-used utilities
AllMyTools blue
#2f5eb0 — the colour of this very website.
Ketchup red
#c23b2e — the accent that screams "click here".
Sunset orange
#ff8c42 — a warm one, for optimistic buttons.
Grass green
#4caf50 — for when your product is "fresh".
Midnight
#171a1f — the dark-mode paper.
Paper cream
#f2ecda — the light-mode paper.
pro tips
Hex and RGB are the same colour in different disguises; HSL is the one that thinks "what colour is it, really?"
Hue 0° and 360° are the same red. Colour wheels are surprisingly round.
If two colours look identical on your screen but their codes differ, your monitor is gaslighting you.
what it does
One colour, three languages. Pick a colour from the swatch, drag the RGB or HSL sliders, or type a HEX code — and every format updates at the same time, because they're all describing the same colour.
Hex and RGB are the same colour in different disguises; HSL is the one that thinks in terms of "what colour is it, really?" — hue, saturation and lightness, for when you want the colour to make sense.
Handy for CSS, branding, matching the brand guidelines and the eternal "what was that green again?" — the question every designer hears at 5 p.m.
Use it when a brand guide hands you a HEX code and your stylesheet wants an RGB, when you're tweaking a colour and need the HSL to make it "slightly warmer", or when you pick a colour in one tool and need the exact code for another. Everything stays in sync, so the code you copy is the colour you see.
quick answers
How do you convert HEX to RGB?
Split the six digits into pairs — red, green, blue — and read each pair as a 0–255 value. #2f5eb0 is rgb(47, 94, 176).
What is HSL?
Hue (0–360°, the actual colour), saturation (how vivid) and lightness (how bright). It's the format that makes "a bit warmer" easy to find.
Are HEX and RGB the same?
Yes — they're two ways of writing the same number. HSL is the odd one out, but it's the one that thinks about colour like a human.
Which format should I use in CSS?
Any of them — they're interchangeable. HEX is the classic, rgb() is unambiguous, and hsl() is great when you need to tweak by feel.