Color Converter
Convert any colour between HEX, RGB, HSL, HSV and CMYK with a live preview.
Convert Colours Between HEX, RGB, HSL, HSV and CMYK
Every colour model describes the same light in a different way. HEX and RGB are how screens address pixels, HSL and HSV separate hue from saturation and lightness in a way humans find intuitive, and CMYK describes ink on paper. Design work moves between them constantly.
This converter shows all five formats at once, with a live preview and the contrast ratios against white and black — the two numbers that decide whether text will actually be readable on that colour. A tint and shade ramp built from the same hue is generated alongside.
Key features
- Five formats simultaneously — HEX, RGB, HSL, HSV and CMYK, each with its own copy button.
- Flexible input — paste HEX (long or short), rgb() or hsl(), or use the native colour picker.
- Contrast readout — ratios against white and black, so accessibility is visible immediately.
- Tint and shade ramp — seven steps at the same hue, ready for a design token scale.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Color Converter
- Pick or paste a colour
Use the swatch picker, or type a HEX, rgb() or hsl() value directly. - Read every format
All five conversions update together, each ready to copy. - Check the contrast figures
Body text needs 4.5:1 against its background to meet WCAG AA. The readout tells you where you stand against white and black. - Use the ramp for a palette
The tint and shade steps keep the hue and saturation fixed while varying lightness — the basis of a consistent colour scale.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and read each as a hexadecimal number. #F86E12 becomes F8 = 248, 6E = 110, 12 = 18, giving rgb(248, 110, 18). Three-digit HEX is shorthand where each digit is doubled: #F81 means #FF8811.
When should I use HSL instead of HEX?
Whenever you want to derive related colours. Changing only the lightness in HSL produces a consistent tint or shade of the same colour, which is very hard to do by editing HEX digits directly. Most design systems define their scales in HSL for this reason.
Why does CMYK look different from what I see?
CMYK is subtractive ink on paper while your screen is additive light, and the two gamuts do not overlap completely. Bright screen colours — vivid oranges and cyans especially — often cannot be reproduced in print. The CMYK figures here are a straightforward mathematical conversion, not a colour-managed profile.
What is the difference between HSL and HSV?
Both start with hue, but HSL’s lightness runs from black through the pure colour at 50% to white, while HSV’s value runs from black to the pure colour at 100%. HSL is generally more intuitive for web work; HSV is common in colour pickers.