Colors CMYK for Print
CMYK is the subtractive color model used in professional printing, where cyan, magenta, yellow, and black inks absorb light instead of emitting it the way RGB does on screens.
Why Print Needs a Different Color Model
Every color model you've used so far for the web, like RGB and hex, is additive: a screen is dark by default and adds red, green, and blue light to build up brighter colors. Paper works the opposite way. It starts out reflecting all light back as white, and ink is added to soak up (absorb) the wavelengths you don't want to see. Because color is created by subtracting light rather than adding it, this family of models is called subtractive.
What CMYK Stands For
- C — Cyan ink, absorbs red light
- M — Magenta ink, absorbs green light
- Y — Yellow ink, absorbs blue light
- K — blacK ink, added separately for deep, true blacks and crisp text
In theory, mixing full amounts of cyan, magenta, and yellow ink should absorb all light and produce black. In practice, real inks are imperfect and the result is a muddy dark brown instead. Printers solve this by adding a dedicated black ink (the 'K' channel) so that text and shadows stay sharp, and because black ink is cheaper than saturating three colored inks to fake the same shade.
CMYK in CSS
CSS does include a way to write CMYK values directly, using the device-cmyk() function (and, in newer drafts, the color() function with a cmyk color space). This exists specifically so that authors preparing a print stylesheet can specify ink percentages the way a prepress designer would, rather than guessing at an RGB equivalent. It is a niche, print-focused feature: browser support is inconsistent, it has no benefit for anything shown on a screen, and most day-to-day web design never touches it.
Example
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
.badge {
background-color: device-cmyk(0% 100% 100% 0%);
color: device-cmyk(0% 0% 0% 100%);
}
}
</style>
</head>
<body>
<span class="badge">Badge</span>
</body>
</html>Example
<!DOCTYPE html>
<html>
<head>
<style>
.print-only {
color: rgb(200, 30, 30); /* fallback for screens and unsupported browsers */
color: device-cmyk(0% 90% 90% 10%); /* print-accurate value where supported */
}
</style>
</head>
<body>
<p class="print-only">This text uses a print-accurate CMYK color with an RGB fallback.</p>
</body>
</html>Even with CMYK values in your stylesheet, converting from RGB to CMYK is never perfectly exact. Screens and printers can reproduce different ranges of color (their gamuts), and the exact result also depends on the paper stock, the printer, and the ink profile used. For serious print production, designers rely on dedicated prepress software and color profiles rather than a CSS file — CMYK in CSS is mainly useful for quick, approximate print stylesheets.
- Use CMYK notation only when styling content meant to be printed, inside an @media print block.
- Keep your primary, screen-facing colors in RGB, hex, or hsl() as usual.
- Treat CMYK-in-CSS as a rough approximation, not a substitute for professional prepress color management.
