Need help understanding the difference between RGB and CMYK [duplicate]

I am a web developer that fancies myself on being graphically savvy, but I am far from a graphical designer — everything I need is able to be done in raw HTML and CSS. The marketing director at our company has been consolidating branding company-wide. Now, when it comes to apparel, the public site, and almost everything else, this is crucial. But with our private in-house web software (which is my domain), aesthetics is everyone’s last concern compared to bug fixing, features, etc. I am, however, trying to get our web app at least a little more brand-compliant. So when the marketing director distributed an up-to-date color guide PDF to me, I was ecstatic! I quickly became confused, however. Here’s a sample from the color guide:

My company's color guide

I know that CMYK is primarily for printing and not the web, which is about all I know about it. However, you’ll notice that the RGB and Hex values provided visually produce different colors that what are appearing. Take, for instance, the black. It says that the RGB equivalent of CMYK 0,0,0,100 is 0,0,0. It’s easy to tell though that this isn’t a “true” black (at least on my display), and comparing it to an RGB of 0,0,0 I generated in Paint (is using Windows a faux pas around here? 😀 ) confirms this. If I take a screenshot of the color guide PDF and then use Paint to grab the color, it tells me that its RGB is 35,31,32.

So what am I missing here? If I use the RGB/Hex values the marketing director provided, my site’s colors will not look the same as they do when I view this PDF, and my attempts to explain this in web design terms to him went over his head.

Does anybody have some guidance on how I should proceed, and how I should implement these colors on the web?

Answer

Consider that perceived color is much more complex than is readily apparent. Take the well known checkerboard illusion. It can be shown that the squares labeled A and B are in fact the same color. Yes, your brain lies.

known checkerboard illusion

Image 1: The checkerboard illusion, squares A and B have the same color values. (see here or here if you dont belie this statement)

Color perceived by a human is affected by the surrounding colors. Now for technical reasons the print colors Panatone, CMYK (Process color) and monitor RGB colors mostly will not match (they can match in a subset but their range differs). For a similar technical reason process color black is not as black as the black in a monitor. Quite a lot more could be written about the technical context.

Now since the color is surrounded by a different black point affects the way all other colors are perceived it means all other colors have to be done separately in that context. So print colors have to be tested in print, on a calibrated color managed workflow. Panatone need to be tested on real Panatone etc.

What you observed is not a mistake

Presumably the person designing the color guide for you knew quite a bit on how color reacts in these situations. So its not a mistake that the colors do not match up with what your monitor reports, especially if your system is not calibrated for print workflows. Even if you are fully color managed there should be a difference if the blacks differ for example.

It is typical that not all style guides have a documented rationale and explanation for everything. For one that does, see the Material Design guide by google. Most graphics designers could do a guide like this, but most clients could not afford to pay, so its not very often done.

Attribution
Source : Link , Question Author : Jacob Stamm , Answer Author : joojaa

Leave a Comment