CMYK to Color Converter

What this tool does

You have a colour written as four ink percentages, something like 20, 80, 0, 10, and you need to know what it actually looks like. CMYK describes a colour as a recipe for a printer, not as something a person can picture, so a row of four numbers leaves you guessing at the colour until you see it.

That is what this does. You give it cyan, magenta, yellow, and key values, and it shows you the colour they make, rendered as a swatch on screen. It turns a set of ink percentages into a colour you can recognise, which is the quickest way to answer what a given CMYK value really looks like, with one honest caveat about screen and print covered below.

How to use it

1. Enter your CMYK values. Set the cyan, magenta, yellow, and key values, each as a decimal from 0 to 1 (for example, 0.2 rather than 20), or choose a colour with the picker.
2. See the colour. The tool displays the colour those four inks would make, shown as a swatch you can view full size.
3. Use what you see. Read the colour to identify or check it, and pick up its screen values from the result if you want them.

Type the four numbers in directly, or set a colour with the picker and read its CMYK values from the result, depending on whether you are starting from ink percentages or from a colour.

How it works

A screen cannot show ink directly, so the tool first converts your CMYK values into the red, green, and blue light a display works in, then paints that colour. The conversion is handled by chroma.js, a library that knows how to move between colour models, turning the four ink amounts into the matching screen colour.

It is worth being upfront about what that screen colour is. It is an idealised, device-independent rendering of the ink mix, a faithful preview rather than a guaranteed match for any particular printer. A real printed result also depends on the paper, the inks, and the press, so treat the swatch as a close, honest guide to the colour rather than an exact picture of the final print.

What the CMYK values mean

A CMYK value is four numbers, the percentages of cyan, magenta, yellow, and key ink, where key is black. Each runs from zero to one hundred and says how heavily that ink prints. The cyan, magenta, and yellow between them decide the colour, while the key controls how dark it is, which is why a dedicated black ink is part of the set.

The reason it is built this way is that printing is subtractive. Ink sits on white paper and absorbs light rather than emitting it, so each ink you add takes more brightness away and the colour grows darker. That is the opposite of a screen, which adds light to a black start, and it is exactly why a CMYK value has to be translated before a screen can show it.

Why seeing the colour helps

The point of rendering a CMYK value is that ink percentages do not let you picture a colour. Even someone who works in print cannot reliably look at 15, 0, 60, 5 and know it is a soft yellow-green, because the numbers describe how to mix the colour, not how it appears. The recipe is precise, but it is not a preview.

Showing the swatch is what turns that recipe into something you can judge. It lets you confirm a mix is the colour you intended, compare it against another, or simply recognise what you are dealing with, none of which the four numbers allow on their own. When you need to know a colour rather than specify it for a press, seeing beats reading the percentages.

Why turn CMYK values into a colour

Often it is identification. You have inherited a print file, a brand sheet, or a spec that gives colours in CMYK, and before you can use or check one you need to know what colour it actually is. Rendering it answers that at once, with no guesswork.

It is also useful for bringing print colours onto screen. If a colour was defined for print but now needs to appear in a digital design, seeing it rendered is the first step toward matching it, and confirms the ink mix is the colour you expected before you carry it further. Over time, glancing between CMYK values and their colours also builds a feel for how ink percentages translate into what you see.

Reading CMYK values by eye

With a little practice you can read the rough sense of a CMYK value without any tool. Start with the key, since it largely sets how dark the colour is: a high K means a dark colour whatever the other inks do, while a K of zero leaves it as bright as the colours allow. That single number tells you a lot before you look at the rest.

Then read the cyan, magenta, and yellow for the colour itself. Heavy cyan with little else leans blue, magenta and yellow together make a red, and cyan with yellow makes a green. When all three are high and roughly equal the colour turns muddy and dark, heading toward a brown or near-black, which is part of why printers reach for the separate key ink. You will not name the exact shade by eye, but you can usually place it, and the swatch is there for when you need to be sure.

Questions people ask

How do I see what colour a CMYK value is?

Enter the four ink percentages and the tool renders the colour as a swatch. The CMYK values are converted into the screen's red, green, and blue light and displayed for you.

Does the swatch match the print exactly?

Not precisely. The swatch is an idealised, device-independent rendering of the ink mix, while the actual printed colour depends on the paper, inks, and press. Use it as a close guide rather than an exact match.

What does the K value do?

K is the black ink, and it largely sets how dark the colour is. Raising K darkens the colour overall, while the cyan, magenta, and yellow set its hue.

Can I get the colour's name too?

Seeing the swatch tells you the colour, and if you want a word for it, a CMYK-to-colour-name tool will give you the nearest named match, since most exact CMYK mixes have no official name of their own.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. CMYK color model, the subtractive model used in printing. Wikipedia. https://en.wikipedia.org/wiki/CMYK_color_model
3. chroma.js (Gregor Aisch). Documentation. https://gka.github.io/chroma.js/