Color Converter — HEX to RGB, HSL, HSV and CMYK
Convert between every common colour format, with shades, tints and harmonies.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Type into HEX, RGB or HSL to convert from that format. Named CSS colours like tomato work too.
Shades and tints
Harmonies
Contrast against black and white
Convert a colour between HEX, RGB, HSL, HSV and CMYK. Type into any of the first three and the rest update instantly — named CSS colours like tomato work too.
You also get a shade ramp, five colour harmonies, and contrast ratios against black and white so you can tell straight away whether text will be readable on it.
How to use Color Converter
- Pick a colour with the swatch, or type a value in any format.
- Copy the format you need with the button beside it.
- Click any shade or harmony swatch to make it the active colour.
Which format to use where
HEX is the web default and the most compact. RGB is the same information in decimal, and is what you need when a value has to be computed. HSL is the one worth learning: because hue, saturation and lightness map to how people actually think about colour, generating a lighter tint or a complementary shade is a single-number change rather than guesswork across three channels.
HSV appears in most design software colour pickers. CMYK is for print — and the conversion here is a naive mathematical one. Real print work needs an ICC profile for the specific press and paper, so treat the CMYK figures as a starting point, not a proof.
Colour harmonies
Harmonies are hue relationships on the colour wheel. Complementary (opposite) gives maximum contrast and works for accent colours. Analogous (adjacent) is calm and cohesive. Triadic is vivid but balanced. Split complementary gives most of the punch of complementary with less tension.
They are starting points, not rules. A common practical approach is one dominant colour, one accent from a harmony, and a range of neutrals — rather than using every colour in a harmony at equal weight.
Check your contrast
The two panels at the bottom show WCAG contrast ratios against white and black. Body text needs 4.5:1 to meet the AA standard. If your brand colour fails against white, it can still work as a background, a border or a large heading — it just should not be your body text colour.
Frequently asked questions
How do I convert HEX to RGB?
Paste the HEX value into the HEX field — RGB and every other format update instantly. Manually, each pair of hex digits is one channel in base 16: #4F46E5 is 4F=79, 46=70, E5=229.
Why use HSL instead of HEX?
Because hue, saturation and lightness map to how people think about colour. Making a shade 10% lighter is one number in HSL; in HEX or RGB it means recalculating three channels.
Is the CMYK conversion accurate for printing?
It is a naive mathematical conversion, useful as a starting point. Real print work needs an ICC profile for the specific press, ink and paper — colours will shift, particularly vivid blues and greens that simply cannot be reproduced in CMYK.
Can I use CSS colour names?
Yes. Type tomato, rebeccapurple or any of the 148 named CSS colours and it converts. We let the browser resolve the name rather than shipping a lookup table.