CSS Named Colors, converted to CMYK and back. Why?

Color profile:

↓ JSON / ↓ CSS

Swatch size:

A thing by Dan Burzo. Source code available on GitHub.

Implementation notes

A thing I want to do for no reason is take the CSS named colors and convert them to CMYK & back. I have an intuition it might turn out cool. (Aug 2017)

CSS comes with a handy set of named colors you can use as keywords. Some of them are wonderful — the famous tomato, wistful lightseagreen, or an understated royalblue. But then there's the eye-searing lot — I'm looking at you, .

What would be a good way of toning these colors down? Why not dance the flip-flop and print them out! CMYK processes cannot represent all colors you can express in RGB and see on screens; in particular, very vibrant tones are impossible to achieve, especially on uncoated (porous) paper. So if we could simulate how these colors look on paper, maybe we can obtain a more pleasant set of colors to work with.

To that end, I dug up the ICC profiles that come with Adobe Photoshop (on a Mac they're stored under /Library/Application Support/Adobe/Color/Profiles/Recommended), read their metadata with icc, and fed them to LittleCMS via a small Node.js wrapper. They served as the CMYK medium in the RGB → CMYK → RGB round-trip the full¹ set of named CSS colors went through. I've used the Relative Colorimetric intent with black point compensation to match the default settings in Adobe products, but one could experiment with the settings to other interesting effects.

The colors are much nicer to look at — I think. Hope you'll find them useful, and in the source code a possible starting point for messing around with CMYK colors.

¹ I've excluded colors with gray in their name because they have identical grey counterparts. The choice was made by flipping a coin.