How do I turn CMYK values into a HEX code?
Convert the four ink percentages to red, green and blue light values, then write each as a two-digit hexadecimal number. Paste 0, 100, 100, 0 (full magenta and yellow, no black) into this tool and it returns #FF0000. The math is quick, but it describes ideal inks, so expect the HEX to look brighter than the printed swatch.
This direction usually comes up when a print-first brand guide lists only CMYK and you're building the website, email template or slide deck. You need something CSS understands, and HEX is the most portable.
The arithmetic
Each screen channel comes from one ink plus black. With all values as fractions of 1:
- red = 255 × (1 − C) × (1 − K)
- green = 255 × (1 − M) × (1 − K)
- blue = 255 × (1 − Y) × (1 − K)
The tool rounds each channel to the nearest whole number, clamps it to 0–255 and writes it as two uppercase hex digits. Algebraically this matches the naive CMYK-to-RGB conversion in the W3C's CSS Color Module Level 5 draft.
Worked example: a lime green from a brand sheet
Say the spec reads C20 M0 Y60 K10.
- Convert to fractions: C = 0.20, M = 0, Y = 0.60, K = 0.10.
- Red: 255 × 0.80 × 0.90 = 183.6, which rounds to 184, or
B8in hex. - Green: 255 × 1.00 × 0.90 = 229.5, which rounds to 230, or
E6. - Blue: 255 × 0.40 × 0.90 = 91.8, which rounds to 92, or
5C. - Join them:
#B8E65C.
That's exactly what the converter outputs. Note that rounding goes to the nearest integer, and halves round up: 50% black alone (0, 0, 0, 50) gives 127.5 per channel, which becomes 128 and therefore #808080.
Why the screen color looks too bright
Plug in pure process cyan, 100, 0, 0, 0, and you get #00FFFF, an electric turquoise. Print a 100% cyan patch and hold it next to your monitor: it will be darker and less saturated. The formula assumes each ink removes exactly one channel of light and nothing else, and that the paper is a perfect white. Real inks overlap, paper has its own tint, and every press behaves a little differently. The CSS Color 5 draft itself warns that this kind of approximation "is likely to be visually very far from the actual printed result."
Accurate conversions use an ICC profile describing the press and paper, which is why color-managed design software can give a different HEX for the same CMYK. The International Color Consortium maintains the profile format. If the brand guide also lists RGB or HEX values, those were picked deliberately for screens. Use them instead of anything computed here.
Reference conversions
| CMYK | HEX | Notes |
|---|---|---|
| 0, 100, 100, 0 | #FF0000 |
Magenta + yellow = red |
| 100, 0, 0, 0 | #00FFFF |
Ideal cyan, brighter than real ink |
| 82, 44, 0, 0 | #2E8FFF |
A mid blue |
| 100, 72, 0, 18 | #003BD1 |
A deep blue with some black |
| 0, 0, 0, 50 | #808080 |
50% black |
| 60, 40, 40, 100 | #000000 |
Rich black, same as plain K on screen |
That last row matters. Anything with K at 100 collapses to #000000, so different rich-black recipes are indistinguishable once converted.
What the input accepts
The parser pulls the first four numbers out of whatever you type, so cmyk(82, 44, 0, 0), 82 44 0 0, 82-44-0-0, 82%, 44%, 0%, 0% and even C 82 M 44 Y 0 K 0 all work. A hyphen between two numbers counts as a separator, not a minus sign. Each value must be between 0 and 100, and decimals like 82.5 are fine. A few mistakes come up often:
| Input | What happens | Fix |
|---|---|---|
0, 0, 0 |
Error: only three numbers | Add K, even if it's 0 |
0, 0, 0, 101 |
Error: out of range | Keep every value at 100 or below |
0.5, 0.2, 0, 0 |
Error: looks like 0-1 fractions | Values are percentages: enter 50, 20, 0, 0 |
Range and count errors show "Enter valid CMYK percentages (0-100)". The fraction check fires only when there are no % signs, every value is between 0 and 1, and at least one has a decimal point, because software such as the CSS device-cmyk() function writes 0.5 to mean 50%. 1, 0, 0, 0 is still read as 1% cyan, and 0.5%, 0, 0, 0 as half a percent. Nothing is sent to a server.
Related conversions
Going the other way, from a web color to ink percentages, is the job of HEX to CMYK. If you need the decimal channels for code or an image editor, CMYK to RGB gives the same color as an rgb() value. Brand guides that name a Pantone instead of CMYK can go through Pantone to HEX, and once you have the code, the CSS editor is a quick place to try it on a page.
Last updated