CMYK to HEX Converter
Turn the CMYK values from a print specification into a hex code you can drop straight into CSS or a design file.
Example conversion
cmyk(0%, 91%, 73%, 14%)
converts to
#dc143c
About CMYK to HEX conversion
Print specifications are written in ink. Websites are written in hex.
When a brand was designed for paper first - and plenty still are - the only
color reference you have may be four percentages from a print manual, while
the developer building the site is asking for a six-digit code. This
conversion bridges that gap: the ink recipe becomes red, green and blue
channels, and those channels are written out in base 16 as
#rrggbb.
It is the friendlier of the two print directions. Screens can display everything four-color process printing can produce, so no color has to be approximated on the way in - the hex code you get back is a faithful digital representation of the printed color, ready to paste into CSS, a design tool or a brand document.
When should you use CMYK to HEX?
- Building a website from a print brand guide - the most common reason by far.
- Adding hex values to an existing brand manual - so designers and developers stop guessing.
- Recreating printed material digitally - a newsletter, social post or slide deck that has to match a printed piece.
- Working from a supplier's color spec - packaging, labels or signage documented only in ink percentages.
How the conversion works
Two steps. First the subtractive formula turns ink coverage back into light:
R = 255 x (1 - C) x (1 - K)G = 255 x (1 - M) x (1 - K)B = 255 x (1 - Y) x (1 - K)
Then each channel is written as two hexadecimal digits and joined behind
a hash. So 95/57/0/1 gives channels of roughly 13, 110 and 253, which encode
as 0d, 6e and fd - the hex code
#0d6efd. Zero ink on all four plates returns
#ffffff, the white of the paper, and 100% K returns
#000000.
CMYK vs HEX
- What they describe - CMYK is four ink percentages on paper; hex is three light channels on a screen, in base 16.
- Determinism - a hex code renders the same on any calibrated screen; the same CMYK build shifts with press, ink and stock.
- Gamut - hex covers more colors, so this direction never has to compromise.
- Length - four numbers versus one compact string that survives copy and paste.
- Tooling - print software works in CMYK; browsers, CSS and design handoff tools work in hex.
Named CSS colors in CMYK and HEX
The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.
Frequently asked questions
Will the hex code match my printed material exactly?
It is the correct mathematical equivalent, but a printed sheet and a backlit screen never look truly identical - paper reflects light while a monitor emits it, and displays vary in calibration. For brand-critical work, compare the on-screen result against a physical proof.
My brand guide has CMYK and Pantone but no hex. What should I use?
If the guide lists a Pantone ink, start with Pantone's own published RGB or hex bridge value for that ink - it is tuned to look right on screen. Use this converter when CMYK is all you have.
Why does 100% of a single ink give such a bright hex color?
Because the formula describes ideal inks. 100% cyan converts to
#00ffff, a far more brilliant cyan than the real ink can
print. It is a good reminder that the math is a translation, not a
simulation of a printing press.
Can I convert a hex code back into CMYK?
Yes, with the HEX to CMYK converter. Starting from CMYK and going back and forth is usually stable, because you begin inside the smaller of the two gamuts.
Do I need to include the leading hash in CSS?
Yes - CSS and HTML require it, as in color: #0d6efd;.
Some design tools accept the code without a hash, but including it is
always safe.