4

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

Improve this question
6
  • When they exported the PDF, they probably had "rich black" turned on. This is not CMYK(0,0,0,100). When (0,0,0,100) is displayed in Acrobat, it does a color transform to approximate what it will look like printed on white paper, this usually makes people think that it will "look pale," but one must always remember that CMYK display is always a simulation of something that cannot be reproduced to arbitrary precision in an additive RGB color model. You should simply use their values and not try and reverse engineer their decision process. Starting point: "relative vs perceptual colorimetric"
    – Yorik
    Mar 22, 2016 at 20:26
  • 4
    Related posts: RGB and CMYK: Why both? and What is the difference between CMYK and RGB?
    – Zach Saucier
    Mar 22, 2016 at 20:30
  • Thanks @Yorik and Zach, your explanation and links pretty much cleared it up for me.
    – Jacob Stamm
    Mar 22, 2016 at 20:49
  • @ZachSaucier i really dislike your second link.
    – joojaa
    Mar 23, 2016 at 5:22
  • @joojaa what's the problem with the second link? (I actually dislike both!)
    – Cai
    Mar 23, 2016 at 8:44

3 Answers 3

Reset to default
4

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.

Improve this answer
3

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.

Improve this answer
0

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.