CMYK to HEX Converter
Convert CMYK ink percentages into a web hex code you can drop straight into CSS. It's an approximate screen stand-in for a printed colour — great for mockups, but proof anything that has to match.
HEX
HEX (no hash)
What is a CMYK to HEX converter?
This converter takes a CMYK ink recipe and produces a hex colour code — the #RRGGBB notation the web runs on. Internally it converts CMYK to RGB and then formats those channels as hexadecimal, so the hex you get is the web-ready twin of the print colour.
It's exactly what you need when a colour lives in a print spec but has to appear on a site, in an email, or inside a design token. Rather than eyeballing it, you get a concrete code to paste into CSS.
As with every print-to-screen conversion, the hex is an approximation of how the ink looks. Paper, ink density and lighting all influence the printed colour in ways a formula can't capture — so use the hex to build, and proof when it counts. Everything runs locally in your browser.
How to convert CMYK to a hex code
- 1
Enter the CMYK values
Type cyan, magenta, yellow and key (black) as percentages from 0 to 100.
- 2
Copy the hex code
A standard #RRGGBB code appears immediately, alongside a colour swatch.
- 3
Paste into your code
Drop the hex into CSS, a design token, or wherever a web colour is expected.
- 4
Proof critical matches
If the screen colour must match the printed piece, confirm with a calibrated proof.
Why it's handy
Print spec straight to CSS
Turn a printer's CMYK breakdown into a hex you can paste into a stylesheet instantly.
Keep brand colours aligned
Give your site the closest web version of a colour defined for print.
Skip the two-step shuffle
Go from ink to hex directly instead of converting to RGB and reformatting by hand.
Local and private
Your colour specs are converted in-browser and never uploaded.
Example conversion
A process blue ink mix, formatted as a web hex code.
cmyk(100%, 49%, 0%, 14%)#0070DBEffectively the same colour as #0070DC; a single-digit drift is normal rounding through RGB.
Hex is just RGB in disguise
A hex code carries no more information than RGB — #0070DC is simply rgb(0, 112, 220) written in base 16. So converting CMYK to hex is the CMYK-to-RGB calculation with a final formatting step. The same gentle caveats apply: the larger RGB gamut means the colour displays fine, but the on-screen rendering only approximates the reflected-ink reality of print.
If you'd rather work in decimal RGB, our CMYK to RGB converter produces the identical colour without the hex formatting.
When CMYK-to-hex is the right move
- Building a web page that has to echo an existing printed brand identity.
- Translating a packaging or signage colour into a design system token.
- Sending a developer a concrete code instead of an ink percentage they can't use.
- Quickly previewing how a print colour reads on screen with a live swatch.
Frequently asked questions
The tool converts the CMYK percentages to RGB, then writes those red, green and blue channels as two hexadecimal digits each. The hex is just a compact form of the same RGB colour.
No, it's an approximation. Printed ink reflects light and depends on paper and viewing conditions, none of which a formula knows. The hex is a faithful screen stand-in, best confirmed with a proof for critical colours.
Yes. The output is a standard #RRGGBB value you can paste straight into a stylesheet, design token, or any web context that accepts hex.
Different tools round at different points and may use slightly different CMYK-to-RGB formulas or an ICC profile. The colours will be very close; tiny differences in the last digit are expected.
Yes, with our HEX to CMYK converter. Bear in mind the screen-to-ink direction is the lossy one, so the returned CMYK is again an approximation.
In Tailwind, add the hex under theme.extend.colors in tailwind.config.js, e.g. brand: '#0070DC'. As a CSS custom property, write --color-brand: #0070DC in :root {}. Either approach lets you reference the colour by name throughout your stylesheet without repeating the hex.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.