I've been working in the print/publishing space for nearly two decades now. Since as long as I can remember, it's always been RGB on the web and CMYK for printing. That's just the way light works.
Well, I'm happy to announce that I recently created a browser polyfill that brings CMYK to the web. This is a first because, despite having a spec, browsers have never supported the device-cmyk() color function.
How Does It Work?
Like all polyfills, you just drop the script into your page.
<script src="https://cdn.jsdelivr.net/npm/device-cmyk@latest/dist/device-cmyk.polyfill.js"></script>
Behind the scenes, it combs through all CSS styles (<style> tags, <link> tags, and inline styles), then it replaces any instances of device-cmyk() with an equivalent rgba() color.
It also proxies the element.style.* properties and similarly rewrites them in-place.
Color Profile Support
Anyone who has worked with print designs knows that on-screen display can be tricky. That's where color profiles come in. A color profile is a way of defining the way colors translate between one color-space and another. The device-cmyk() polyfill supports defining the color-profile via @color-profile.
Why Did I Do This?
The explanation is simple. Many HTML-to-PDF tools support device-cmyk(), but without browser support it was hard to preview my designs. In particular, I was using Weasyprint, which takes a second or two to fire up. Now that my browser can give me an accurate preview of the CMYK colors, I have a very quick way to preview my layout before it gets converted to PDF.
Give It A Try
If you're a print/publishing designer or developer, or just want to contribute to an open-source project, check out fstrube/device-cmyk. I'm looking for beta testers who can push it to the limit and prepare for a 1.0.0 stable release.
Top comments (0)