Color Converter (HEX / RGB / HSL / CMYK)

The four colour models

HEX and RGB are the same thing in different notation. Both describe a colour as red, green, and blue channel values from 0 to 255. RGB writes them as decimal numbers, rgb(37, 99, 235). HEX writes each channel as two hexadecimal digits, #2563eb, where 25 is 37, 63 is 99, and eb is 235. Converting between them is pure notation, no information changes.

HSL describes the same colour differently: hue (which colour, 0 to 360 degrees around a colour wheel), saturation (how vivid, 0 to 100%), and lightness (how light or dark, 0 to 100%). It maps onto how people actually think about colour, which makes it far more practical for adjusting a colour deliberately.

CMYK is the subtractive model used in printing: cyan, magenta, yellow, and key (black). Screens emit light and add colours together toward white, printers absorb light and subtract toward black, so the two models work in opposite directions.

Why HSL is easier to work with

Suppose you want a slightly darker version of a blue. In RGB you would have to reduce all three channels by some amount while keeping their ratios roughly intact, which is fiddly and easy to get wrong, the colour tends to drift toward grey or shift hue.

In HSL you reduce the lightness and leave hue and saturation alone. The colour stays recognizably the same, just darker. This is why design systems are usually defined in HSL: a palette of five blues is one hue with five lightness values.

Useful hue landmarks: 0 is red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta. At 0% saturation every hue produces the same grey, and at 0% or 100% lightness you get black or white regardless of the other values.

CMYK is an approximation

The CMYK values here are a mathematical conversion from RGB, and they will not match what a professional printer produces.

The reason is that CMYK is device-dependent. The actual colour produced depends on the specific inks, the paper stock, and the press. Professional print workflows use ICC colour profiles that describe a particular device's behaviour, and conversion goes through those profiles rather than a fixed formula.

There is also a gamut problem: screens can display vivid colours, particularly bright greens and blues, that CMYK inks simply cannot reproduce. Those colours get mapped to the nearest printable approximation, which is why a design can look noticeably duller in print than on screen.

Treat the CMYK output here as a reasonable starting point for understanding a colour's composition, not as production-ready print values. For commercial printing, work from the printer's colour profile.

Examples

Three-digit HEX is shorthand where each digit is doubled, so #f80 expands to #ff8800. It only works when both digits of every channel are identical.

Practical notes

Contrast and accessibility

WCAG requires a contrast ratio of at least 4.5:1 between text and its background for normal text, and 3:1 for large text. Contrast depends on relative luminance, not on the colours looking different: two colours with similar lightness can be clearly distinct in hue yet fail contrast requirements entirely, which particularly affects readers with colour vision deficiencies.

Alpha channels

Both rgba() and eight-digit HEX add transparency, where the final pair of hex digits is the alpha value: #2563eb80 is the same blue at about 50% opacity. This tool accepts alpha in the input and ignores it, since alpha is a compositing instruction rather than part of the colour itself.

The eyedropper

The pipette button samples any colour on your screen. It relies on the EyeDropper API, currently available in Chrome, Edge, and Opera. In other browsers the button stays visible but disabled, so it is clear the feature exists but is unavailable rather than appearing broken.

Frequently asked questions

What is the difference between HEX and RGB?

Only notation. Both encode the same red, green, and blue channel values, HEX in hexadecimal and RGB in decimal. Conversion between them is exact.

Why does my CMYK output not match my printer?

Because CMYK depends on the specific inks, paper, and press. A fixed formula cannot account for that. Professional printing uses ICC profiles for the target device.

How do I make a colour lighter without changing its hue?

Convert to HSL and raise the lightness value. Hue and saturation stay unchanged, so the colour remains recognizably the same.

What does the shorthand #f80 mean?

It is three-digit HEX, where each digit is doubled: #f80 expands to #ff8800. It only works when both digits of each channel match.

Can I enter colour names like "red"?

Not currently. The tool accepts HEX, rgb(), and hsl() notation. Named CSS colours would need a lookup table of around 150 entries.

Which hue value corresponds to which colour?

0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta, wrapping back to red at 360.

Related tools

• Number base converter, for the hexadecimal behind HEX colours
• Case converter, for CSS class naming
• All developer tools