Colour Converter

HEX and RGB are the same thing written differently. `#663399` is three pairs of hexadecimal digits — 102, 51 and 153 — and `rgb(102 51 153)` is those numbers in decimal. Converting between them cannot lose anything, because nothing changes but the base.

HSL and HSV are the same colour described by a person rather than by a screen. Instead of how much red, green and blue to mix, they give the hue as an angle on a colour wheel, then how saturated it is and how light or bright. That is why designers reach for them: making a colour 10% lighter is one number in HSL and three unobvious ones in RGB. The conversion is exact in both directions, and the only reason the numbers here are shown to one decimal place is that a whole degree of hue is a visible step.

Everything else on this page is a rearrangement of the same three numbers. CMYK is not: it describes ink on paper, and how a given mixture of cyan, magenta, yellow and black actually looks depends on the press, the paper, and the colour profile the printer works to. No formula has access to any of those.

What you get here is the standard naive conversion, which every tool that offers CMYK without asking for a profile is also doing. It is a reasonable starting point and a fine way to see roughly where a colour sits, and it is not a print-ready value. If the colour matters — a brand colour on packaging, anything that has to match across a run — the printer will want the RGB or the hex and will do the separation against their own profile. Handing them a CMYK value from a web page means handing them a guess and asking them to treat it as a specification.

Alpha is carried through: `#663399cc`, `rgba(102, 51, 153, 0.8)` and `rgb(102 51 153 / 80%)` all mean the same colour at 80% opacity, and all three are read correctly. The eight-digit hex form is the one people meet least often and the one that trips up the most tools — it is simply the six-digit form with a fourth pair of digits for opacity.

CMYK has no equivalent, because ink either goes on the paper or does not. When the colour you enter is partly transparent, the CMYK figures describe the colour as if it were fully opaque, which is the only sensible reading.

Underneath the notations are two numbers: the contrast ratio of your colour against white and against black. They come from the WCAG definition, which is not a simple brightness average — the channels are weighted, because the eye is far more sensitive to green than to blue, and each is linearised first to undo the curve that display values are stored with.

The practical use is deciding which text colour to put on a background. 4.5 is the threshold for ordinary body text and 3 for large headings, so a background whose better ratio falls below 4.5 is one that needs bigger text or a different background. It is the fastest way to find out that a brand colour which looks fine in a mockup will fail an accessibility audit.

A colour that cannot be read is reported as unreadable rather than silently replaced. This sounds obvious and is unusual: the common way to build this page is to hand the string to the browser and read back what it computed, which is four lines of code and answers `#12345` with whatever colour was there before.

So a missing digit looks like a working conversion, and you find out when the shade is wrong somewhere else. Here the parsing is done explicitly, which costs a table of the hundred and forty-eight CSS keywords and gives you a complaint instead of a plausible wrong answer.