CMYK to Hex Color Converter

What this tool does

A colour was defined for print, as four ink percentages, and now it needs to live on the web, where colours are written as hex codes. This is the everyday journey of a brand colour heading the other way, from the press back to the screen, and the CMYK values have to become a hex code like #E67E22 before a website or design tool can use them.

That is what this does. You give it cyan, magenta, yellow, and key values, and it returns the matching hex code, the same colour as a screen would show it, packed into a single string ready to paste. It carries a print colour onto the screen in the form the web expects, with a note below on what changes as ink becomes light.

How to use it

1. Enter your CMYK values. Type the cyan, magenta, yellow, and key values, each as a decimal from 0 to 1 (for example, 0.2 rather than 20), or set a colour with the picker.
2. Read the hex code. The matching six-character hex code, with its leading hash, appears right away.
3. Copy it across. Drop the hex code into your stylesheet or design tool, where it represents the screen version of your print colour.

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

How it works

A hex code is a way of writing red, green, and blue, so the ink values have to reach RGB first. The tool turns your CMYK into the matching screen colour, then writes that colour's red, green, and blue amounts in hexadecimal as the six-character code. The work is handled by chroma.js, a library that moves between colour models, including from ink to screen.

So this is a real conversion across colour worlds, not just a relabelling. It crosses from a description of ink on paper to a description of light on a screen, and then compacts that into hex. The result is exact as a screen colour, and the section further down covers the one honest difference between how the colour looked as ink and how it looks as light.

What a hex code is

A hex colour code is the standard way to write colour for the web: a hash followed by six hexadecimal characters, like #E67E22. The six characters form three pairs, one for each channel, with the first pair red, the second green, and the third blue. Every pair runs from 00, meaning none of that colour, to FF, meaning the full amount.

The characters use hexadecimal, a counting system of sixteen digits, 0 to 9 and then A to F, which is a compact way to write a number from 0 to 255 in just two characters. So a hex code is really the red, green, and blue amounts of a screen colour in a short, tidy form, which is exactly why CSS and design tools lean on it rather than on longer notations.

How CMYK becomes a hex code

The two describe a colour in opposite ways. CMYK is a recipe of inks that absorb light from white paper, built for a press. A hex code is a record of red, green, and blue light a screen emits, built for a display. They belong to different colour worlds, so getting from one to the other is a genuine conversion rather than a rewrite.

The route runs through RGB. The four ink amounts are turned into the red, green, and blue light that would reproduce the colour on screen, and each of those amounts is then written as a two-character hexadecimal pair, the three pairs joining behind a hash. The conversion crosses from ink to light first, then compacts the screen colour into the hex code, with the colour preserved as faithfully as a screen allows.

Why convert CMYK to hex

The usual reason is bringing a print colour to the web. A brand whose colour was set in CMYK for printed materials needs a hex code to use that same colour on its website, in an app, or in a digital design, so the colour stays consistent across print and screen. Converting the CMYK is how that colour makes the jump.

It is also simply what digital tools expect. Hex is the common format for colour in CSS, HTML, and design software, so a colour arriving as ink percentages has to become hex before it can be dropped in. The conversion gives you a single, ready-to-paste code that stands in for the print colour wherever screen colour is needed.

From ink to screen

There is a reassuring side to converting this direction. The range of colours ink can mix is smaller than the range a screen can show, so every CMYK colour has a hex equivalent that a screen can display. That is the opposite of converting screen to print, where the most vivid colours can fall outside what ink can reproduce; coming from CMYK, the colour always fits.

The honest part is that the hex code is the screen's version of the ink, not a perfect copy of the printed page. A monitor emits light while paper reflects it, so the same colour can feel a little brighter or cooler on screen than in print. Treat the hex as a faithful on-screen equivalent of your CMYK colour, ideal for digital use, while remembering that screen and print are simply two different ways of showing a colour.

Questions people ask

What is a hex colour code?

It is the way colour is written for the web: a hash followed by six hexadecimal characters, three pairs giving the red, green, and blue amounts, each pair from 00 to FF.

Does CMYK convert straight to hex?

No. The CMYK inks are first turned into RGB, then written in hexadecimal as the hex code, since print and screen describe colour in different ways.

Will the web colour match the print?

It will be a faithful screen version of the ink mix, but a screen and a printed page never match perfectly. Treat the hex as the on-screen equivalent rather than a print-exact copy.

Does every CMYK colour fit in hex?

Yes. The range ink can mix is smaller than the range a screen can show, so any CMYK colour has a hex equivalent, unlike the other direction where vivid screen colours can fall outside print.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Web colors, hex triplets and how they encode red, green, and blue. Wikipedia. https://en.wikipedia.org/wiki/Web_colors
3. chroma.js (Gregor Aisch). Documentation. https://gka.github.io/chroma.js/