CMYK

CMYK is a subtractive color model that describes a printed color as the amounts of cyan, magenta, yellow and black ink laid on paper. CMYK stands for Cyan, Magenta, Yellow and Key, where the key plate is black. Each ink is a percentage from 0% to 100%. Screens use additive RGB, so a CMYK value has no fixed screen color until it is tied to a printer or ICC profile.

How it works

Ink removes light from a white substrate. Cyan absorbs red, magenta absorbs green and yellow absorbs blue, so mixing inks makes colors darker. Pairs of inks give the RGB primaries: cyan with yellow gives green, magenta with yellow gives red and cyan with magenta gives blue. All three inks together give only an imperfect dark, which is why a separate black ink exists.

Black ink is there for practical reasons. It prints text and outlines more sharply than three inks overlapped, and it uses less ink than building dark tones from cyan, magenta and yellow.

Because the actual color depends on the inks, the paper and the press, CMYK has no colorimetric meaning by itself. CSS Color Module Level 5 therefore adds a device-cmyk() function. It takes four numbers from 0 to 1, or four percentages, and clamps anything outside that range. When no CMYK ICC profile is supplied, the browser converts with this naive formula, which is not a print simulation.

• To RGB: red = 1 - min(1, cyan x (1 - black) + black), and the same for green with magenta and blue with yellow.
• From RGB: black = 1 - max(red, green, blue), then cyan = (1 - red - black) / (1 - black), and likewise for magenta and yellow. If black is 1, the other three are 0.

function rgbToCmyk(r, g, b) {
  [r, g, b] = [r, g, b].map(v => v / 255);
  const k = 1 - Math.max(r, g, b);
  if (k === 1) return [0, 0, 0, 100];
  return [(1 - r - k) / (1 - k), (1 - g - k) / (1 - k), (1 - b - k) / (1 - k), k].map(v => +(v * 100).toFixed(1));
}
function cmykToRgb(c, m, y, k) {
  return [c, m, y].map(v => Math.round(255 * (1 - Math.min(1, v * (1 - k) + k))));
}
console.log(rgbToCmyk(59, 130, 246));
console.log(rgbToCmyk(0, 0, 0));
console.log(rgbToCmyk(255, 0, 0));
console.log(cmykToRgb(0.76, 0.472, 0, 0.035));
console.log(cmykToRgb(1, 1, 1, 0));

[ 76, 47.2, 0, 3.5 ]
[ 0, 0, 0, 100 ]
[ 0, 100, 100, 0 ]
[ 59, 130, 246 ]
[ 0, 0, 0 ]

The round trip of #3b82f6 works in this math. A real press would not reproduce it.

What does the K in CMYK stand for?

The K in CMYK stands for Key, the printing plate that carries the black detail.

Common pitfalls

• Trusting the naive formula for print: it has no knowledge of ink colors, dot gain or paper. Converting the same color through a real press profile and through the naive formula gives visibly different results, so use the printer's ICC profile for anything that will be printed.
• Ignoring the RGB side too: the naive formula also knows nothing about the RGB space it lands in, so even a clean-looking round trip like the one above proves nothing about print.
• Treating cmyk(100%, 100%, 100%, 0%) as black: the naive formula gives rgb(0 0 0) for it, but real cyan, magenta and yellow inks together produce only an imperfect dark. Black text should use the K channel.
• Using 0 to 255 or 0 to 1 by accident: CMYK is normally written as percentages. device-cmyk() takes 0 to 1 in the legacy form and either numbers or percentages in the modern form.
• Assuming CMYK is an absolute color space: like RGB without sRGB, the four numbers mean nothing until a profile says which inks they refer to.

Related terms

• RGB — the additive model that CMYK is converted to for screens
• HSL — a hue model that has no direct ink meaning
• HSV — another hue model based on RGB channels
• sRGB — the screen space the naive conversion targets
• Lab color — the device-independent space that profile-based CMYK conversion uses

See also

• Tool: Color Converter — Convert colors between HEX, RGB, HSL, HSV, and CMYK.
• Tool: Color Picker — Pick any color with a visual spectrum, enter values in HEX, RGB, HSL, or CMYK, and copy.
• Cheatsheet: Color Formats Cheatsheet — CSS color syntax side by side