Mobile app version of vmapp.org
Login or Join
Merenda852

: Need help understanding the difference between RGB and CMYK I am a web developer that fancies myself on being graphically savvy, but I am far from a graphical designer — everything I need

@Merenda852

Posted in: #Color #ColorConversion #ColorReproduction #ColorSpaces #WebsiteDesign

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:



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? :D ) 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?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Merenda852

3 Comments

Sorted by latest first Latest Oldest Best

 

@Debbie163

I am glad of your so well formulated question.


Take, for instance, the black. It says that the RGB equivalent of CMYK 0,0,0,100 is 0,0,0. ... it tells me that its RGB is 35,31,32.


The black is a very specific case.

That is totally true. A 0,0,0,100 black is not a "true" black, but it is used as the standard black for a text. In case of a logo for example you use that value in for example 2 cases.

1) You want to save costs, so you only use one ink.

2) You do not want your logo to be "fuzzy" by using aditional inks to darken it further.

In some cases, for example a photo of the deep universe, you use a combination of inks, c75m68y67k90 for example. Thoose values vary depending on the type of paper you are printing, inclusive the country you live in. That value is given by a color profile of the combination of the device+paper+ink.



Just stick to the RGB and hex values. If you are using a program like Photoshop, deactivate the color profiles or use sRGB on an RGB file.

10% popularity Vote Up Vote Down


 

@Cugini998

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.



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.

10% popularity Vote Up Vote Down


 

@Angie364

To get the most accurate colors for the web, stick with the RGB or Hex values provided with the swatch colors and use them in the CSS.

Trying to convert the CMYK to RGB will never quite match, especially with so much variance in what type of display you have.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme