Color Converter
Convert between HEX, RGB, and HSL — with live sliders and a preview.
About Color Converter
A color converter translates a color between HEX, RGB, and HSL — the formats CSS and design tools expect — with a live preview. Enter a color in any format, or drag the R/G/B sliders, and see the equivalents update instantly, each ready to copy.
HEX and RGB are the same thing
A hex colour is just RGB written in base 16. The six digits are three pairs — red, green, blue — each from 00 to FF, which is 0 to 255 in decimal. So #FF6600 is exactly rgb(255, 102, 0); converting between them is a base change and nothing is lost or gained either way.
The three-digit shorthand doubles each digit, so #F60 expands to #FF6600. That only works when both digits of each pair match, which is why most colours cannot be shortened. Eight digits adds an alpha channel as a fourth pair, giving #FF6600CC for about 80% opacity.
Why HSL is easier to work with
HSL describes a colour the way people talk about one: hue as an angle from 0 to 360 on the colour wheel, saturation as a percentage from grey to vivid, lightness as a percentage from black to white. Red is at 0 degrees, green at 120, blue at 240.
That makes systematic changes trivial. Building a set of tints and shades means holding hue and saturation and changing only lightness. Finding a complementary colour means adding 180 to the hue. Doing either in hex means converting, calculating, and converting back — which is exactly why design systems tend to be defined in HSL even when they ship as hex.
Equal lightness does not mean equal brightness
HSL has one significant flaw: its lightness value does not match perceived brightness. Yellow at 50% lightness looks far brighter than blue at 50% lightness, because human vision is much more sensitive to green wavelengths than to blue. A palette built by holding lightness constant across hues will look uneven, with the yellows glaring and the blues muddy.
This is why accessibility contrast is calculated from relative luminance — a weighted formula, not HSL lightness — and why newer CSS colour spaces such as OKLCH exist. They are designed so that equal lightness values genuinely look equally bright across hues, which makes generating a balanced palette possible arithmetically.
Choosing a format in CSS
Hex is compact and universally understood, which makes it the right default for a fixed brand colour. HSL is better wherever a colour is derived from another — hover states, disabled variants, a ramp of shades — because the relationship stays visible in the code. A reader can see that two values differ only in lightness; they cannot see that from two hex strings.
Modern CSS also separates the colour from its alpha, so you can define a hue once as custom properties and apply opacity where needed rather than maintaining a separate semi-transparent variant. Whichever you choose, be consistent within a project — mixing formats for the same colour is how two shades that were meant to be identical quietly drift apart.
Frequently asked questions
- What's the difference between HEX, RGB, and HSL?
- HEX and RGB both describe red, green, and blue channels (HEX in base-16); HSL describes hue, saturation, and lightness, which is often more intuitive to adjust by eye.
- How do I convert HEX to HSL?
- Paste or type a hex code and the HSL value appears instantly below the preview, alongside the RGB equivalent — no manual math needed.
- Do 3-digit hex codes work?
- Yes. Shorthand like #fff is expanded correctly to its full six-digit form before converting.
- Is there a live preview?
- Yes. A swatch updates as you type or move the sliders, so you see the exact color while you convert it.