How to make my logo color look the same in Web & Print?

  • My client wanted to use the color #dd0017 as his primary red in his website
  • All along the way we have designed the whole site & the logo in that color (I did the logo in RGB).
  • Now he is asking for a print version. I tried to make the logo same as #dd0017. But it’s not taking the value at all in illustrator or Photoshop. It is automatically shifting to #db1e26.
  • Moreover, most websites are showing that equivalent color code for CMYK is (0,100,93,13). When I am trying to that, it’s getting another Hex code of #d11628.
  • Please note that I am a little novice on the matter of colors. I am a Web designer but sometimes I need to make logos. But I really don’t understand them much.

So is there a solution? If there isn’t can anyone please suggest me how should I explain it to the client?


here is the technical answer

Saying that the color is #dd0017 is meaningless, unless it is paired with information about what color space you are using! Therefore also conversion from #dd0017 to CMYK is meaningless. With this off our agenda we can start to look what same would mean in your scenario.

When you talk about pure color like #dd0017 you are specifying a color that is different on each and every monitor. To talk about same then you get into problems because we do not know if you mean:

  • Same as on your monitor
  • Same as on your clients monitor
  • Same as on a standard colorspace

See the same number makes different colors in different colorspaces. For it to make any sense to convert accurate color you muist specify the color space used. So for example #dd0017 in sRGB colorspace makes sense. Numbers are not important and without this information totally useless. So the numbers do not represent color as such they represent a color in one space, different RGB spaces will have different numeric values.*

Enter color management. For all of this to make any sense you need to know what the color is in some device neutral space. In essence you need to measure the monitor, with a colormeter (aka Montor calibrator like a ColorMunki for example). In addition you need to know what the light conditions at the desktop is, so to be accurate you need to measure this monitor where it is used (or do it continuously). Now you can make a profile for your monitor, which tells us how that particular monitor/work space combo looks like as every monitor on the globe is unique.

We can then pair that magic number with this profile information to get device neutral values, or make the display conform to a standard color space like sRGB. If you make the monitor display like sRGB then you then you see the colors as intended by the standard which is what web ought to be.

Ok, you can now convert the color to neutral space, but obviously you still need to know the printers space. For the printer the process is much the same. A commercial printer most likely is using calibration to some standard space, so again saying CMYK values without telling space is meaningless. But if you want to do the same with a office printer then it too must be calibrated, i suggest at least 3 times per toner cartridge lifespan.

Catch 13

Color matching deals with a lot of problems but the central question is what to do with colors that can not be reproduced. See it might be that your color exceeds the colors that your CMYK printer can produce. The size of each space is called a gamut, and exceeding a gamut is easy since the sRGB space is much bigger than the standard CMYK spaces SWOP, FOGRA, GRACol etc…

This is why most designers design in reverse. They choose a color, usually not in CMYK but Pantone and go backwards from there. Again Pantone is bigger than CMYK but provides good starting points for conversions, and has color chips that accurately reflect the values available. Mainly because this is easier than trying to do the tech route, which is demanding to say the least.

So yes it can be done, but requires you to do quite a lot of work.

* This is what Photoshop does for you its been told the space your working with is X and the monitor is Y and thus numbers change to match.

Source : Link , Question Author : A Mandal , Answer Author : Community

Leave a Comment