The web has always been RGB territory, but print workflows speak CMYK. That gap can be frustrating when you're building tools that need to bridge digital design and print production.

I built device-cmyk to make the CSS device-cmyk() color function work in browsers that don't support it natively. The polyfill scans your stylesheets and converts CMYK colors to RGBA, with optional ICC profile support for more accurate color conversion.

Getting Started

Getting started is as simple as adding the polyfill to your page:

<script src="https://unpkg.com/device-cmyk@latest/dist/device-cmyk.polyfill.js"></script>

Then use CMYK values directly in your CSS, just as you would any other color:

.brand-primary {
    background-color: device-cmyk(1 0 0 0);
    color: device-cmyk(0 0 0 1);
}

.brand-accent {
    background-color: device-cmyk(0 1 1 0);
}

The four values represent cyan, magenta, yellow, and black, respectively, using numbers between 0 and 1 or percentages. The polyfill handles converting these values into colors the browser can render.

Beyond Basic Color Conversion

For print-focused workflows, device-cmyk also supports ICC color profiles. Define a profile in CSS before loading the polyfill, and it will use that profile when converting colors:

@color-profile device-cmyk {
    src: url("/profiles/USSheetfedCoated.icc");
}

The project includes several profiles for different printing conditions, including FOGRA, SWOP, and Japan Color profiles.

Whether you're building a print-oriented web application, experimenting with color management, or just want to work with CMYK values in CSS, give device-cmyk a try.

Check it out on GitHub.