DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for CMYK
Alvaro Montoro
Alvaro Montoro

Posted on

CMYK

Warning: This color format is not widely supported at the moment. Be cautious when using it, and avoid relying on it in production environments.

While screens typically display colors in RGB, other devices represent colors in different ways. For example, printers generally use combinations of cyan, magenta, yellow, and black to represent colors because those are the most common ink colors.

CMYK stands for Cyan, Magenta, Yellow, and Key, which matches the ink colors in the printer (with black for key). And it could be a good format to pick if the end goal is to have the content physically printed (as it will better match the mixture of colors).

The function to specify the CMYK format is not cmyk() as one could have expected but device-cmyk() because it defines a device-dependent CMYK color:

device-cmyk function syntax: cyan (number or percentage). Space. Magenta (number or percentage). Space. Yellow (number or percentage). Space. Black (number or percentage). Optionally, forward slash alpha (number or percentage). Optionally, comma and a fallback color in any format

As in previous color functions, as it is a newly released one, it only comes with the new space-separated notation. But cmyk() has something different from the other color functions: it allows adding an optional fallback color in case the specified CMYK color is not valid.

Considering the option of using a number or a percentage –remember, they cannot be combined, it's one or the other for all the arguments–, the inclusion of alpha and a fallback, there are 12 combinations for the same color in CMYK format:

color: device-cmyk(1 0 0 0);
color: device-cmyk(1 0 0 0 / 1);
color: device-cmyk(1 0 0 0 / 100%);
color: device-cmyk(1 0 0 0, #00FFFF);
color: device-cmyk(1 0 0 0 / 1, #00FFFF);
color: device-cmyk(1 0 0 0 / 100%, #00FFFF);
color: device-cmyk(100% 0% 0% 0%);
color: device-cmyk(100% 0% 0% 0% / 1);  
color: device-cmyk(100% 0% 0% 0% / 100%);   
color: device-cmyk(100% 0% 0% 0%, #00FFFF); 
color: device-cmyk(100% 0% 0% 0% / 1, #00FFFF); 
color: device-cmyk(100% 0% 0% 0% / 100%, #00FFFF);
Enter fullscreen mode Exit fullscreen mode

As a curiosity, when selecting a value for a color input on a Mac computer, the menu will give us the option of picking the color on device-CMYK too:

CMYK color picker on Mac

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›