Color Converter — HEX, RGB, HSL & CMYK codes online
Enter a colour in any notation and get HEX, RGB, HSL, HSV and CMYK back, ready to paste into CSS or a design tool. Free, instant and fully browser-side.
Accepts #hex, rgb() or hsl()
About the Color converter tool
The same colour is written several different ways depending on where it is going, and the notations are not interchangeable. CSS wants HEX or RGB. A designer hands over HSL because it is the only notation you can reason about by hand. A print supplier asks for CMYK. A brand guideline lists one of each and expects them to match. Converting between them is constant, mechanical work that nobody should be doing with a calculator.
HEX and RGB are the same thing written differently — three values from 0 to 255, one per channel, expressed either as hexadecimal pairs or as decimal numbers. HSL is genuinely different and far more useful for design work, because it separates hue from saturation and lightness. Building a palette in HSL means holding the hue steady and stepping the lightness, which produces a coherent set of shades; attempting the same in HEX means guessing at six characters until something looks right.
CMYK is the outlier and deserves a warning. It describes ink on paper subtractively, while screens emit light additively, and the two gamuts do not overlap fully. Bright saturated screen colours — vivid oranges, electric blues, pure greens — simply cannot be mixed from process inks, so a CMYK conversion is an approximation of the nearest printable equivalent. Treat it as a starting point for a print job, not as a guarantee of what will come off the press.
The contrast figures shown against white and black are the practical part for anyone building an interface. Accessibility guidelines require a ratio of at least 4.5 to 1 between text and its background for normal-sized text, and 3 to 1 for large text. That is not a style preference — it is what makes a page readable for people with low vision, in bright sunlight, or on a poor-quality screen, and it is the check most often skipped when a palette is chosen purely on appearance.
How it works
Enter a colour
Type a HEX code, an rgb() or hsl() value, or use the picker. Any recognised notation works as input.
Read every format
HEX, RGB, HSL, HSV and CMYK are all shown at once, along with contrast ratios against white and black.
Copy what you need
Take the notation the tool you are pasting into expects — CSS, a design app, or a print specification.
Frequently asked questions
- What is the difference between HEX and RGB?
- None, in substance — they are two ways of writing identical values. HEX packs three channel values from 0 to 255 into hexadecimal pairs, so #FF8800 is exactly rgb(255, 136, 0). HEX is more compact and traditional in CSS; RGB is easier to read and required when you want an alpha channel via rgba().
- Why would I use HSL instead?
- Because it maps onto how people actually think about colour. Hue is the position on the colour wheel, saturation is intensity, lightness is how light or dark. That makes systematic palettes straightforward: hold the hue, step the lightness, and you get a coherent range of shades. Doing the same in HEX means adjusting six characters and hoping.
- Will the CMYK values match what my printer produces?
- Approximately at best. Screens emit light and inks absorb it, and the printable gamut is smaller — vivid oranges, electric blues and pure greens cannot be reproduced with process inks at all. Treat the conversion as a starting point and always ask your printer for a proof if the colour is important, particularly for brand work.
- What contrast ratio do I need?
- Accessibility guidelines set 4.5 to 1 as the minimum for normal body text against its background, and 3 to 1 for large text, meaning roughly 24 pixels or 19 pixels bold. Interface components and meaningful graphics also want 3 to 1. Higher is better — those figures are a legal and practical floor rather than a target to aim at.
- What is HSV and how does it differ from HSL?
- Both separate hue from the other properties, but they define the third axis differently. In HSL, 50 percent lightness gives the pure hue and 100 percent is always white. In HSV, 100 percent value gives the pure hue at full brightness and white requires dropping saturation to zero. Design software commonly uses HSV; CSS uses HSL.
- Can I convert a Pantone colour?
- Not here. Pantone colours are physical proprietary ink mixes identified by a licensed catalogue rather than a formula, so there is no mathematical conversion — only a lookup table Pantone controls. Their official bridge guides give the nearest CMYK and RGB equivalents, and those approximations are what any conversion would be reproducing anyway.
- Is anything sent to a server?
- No. The conversions are arithmetic performed in your browser tab, so nothing is transmitted, stored or logged. It also means the tool works with no network connection at all — useful when you are picking colours on a laptop somewhere without reliable internet.