16
  • 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?

  • First, make sure everyone is using the same make and model of monitor. – aslum Nov 8 '16 at 15:05
28

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.

  • Also note that Adobe suggests the safe colour closest to the current colour when picking one from the palette. An it distinguishes colours safe for print and safe for display. I think, safe here means not-so-risky. – Crowley Nov 7 '16 at 16:47
  • 5
    This is a good answer, +1. You may also want to briefly mention that the color perceived by a human observer will vary significantly based on multiple factors, including lighting (e.g. shadows/shading, etc.), and the colors that are near what is being observed (including the paper on which it is printed, which can also bleed through a print). There are many optical illusions which clearly demonstrate that exactly the same color will be perceived differently depending on the surrounding colors/image. – Makyen Nov 7 '16 at 20:29
8

Matching colours between screen and print is a complex and sometimes impossible task. Due to the nature of light (Screens, RGB) versus ink (CMYK, Pantones, etc) and the fact that pretty much every monitor will display the colour slightly differently and print will look different in different lights. This kind of colour management is a job in itself.

However, in this case you might be lucky. The colour in question is a clean, bright red so your choices are fairly limited. If you are printing CMYK then it is highly likely that you best option will be 100% Magenta, 100% Yellow. This is about as red as you can get from process inks and has the advantage of being relatively stable because you are just printing solids. If you have the option of using a Pantone Spot colour then I would suggest Pantone 485. Again, a nice bright red that is lots of designer's 'go-to' choice for red.

This is all subjective of course and if your customer does not like any of the above options, then the best course of action is to hand them a Pantone swatch book and let them pick a red that they think matches. Ultimately, the colour on screen will never be a perfect match to ink on paper, but finding a colour that is subjectively 'the same' shouldn't be hard and one of the options that I have suggested above should do the job.

4

You should choose closest value from a Pantone Catalogue which you can find it print shops. This way, you will have two colors for web and print and you should set them in corporate identity guideline (you can see an example in the link).

If you wonder what causing this, the thing is screens working on RGB and print works on CMYK colors you can see the difference here.

4

Your problem is that RGB and CYMK don't have the same gamut, or range. There are colors which RGB can produce which CMYK physically can't.

Unfortunately you have to go back to your client and explain this, which you should have done in the first place when the client chose that color. You might possibly get a spot color which is close (I don't have a Pantone or Trumatch book to hand to check), but if there's no single spot color (pre-mixed ink) which works, or CMYK can't produce that value, then your client will have to compromise somehow.

Do a search on this site through the rgb and cmyk tags and you'll get more information about the two color gamuts and how to address translating between them.

2

There is no way how to make colours look exactly the same on the print and on the screen. Except for the case, the screen is painted with appropriate colour.

  • Two different screens will show the very same RGB coordinate differently. To demonstrate this, you can connect CRT and LED screen to the computer and clone the screen.
  • One photographed colour will be represented differently using Adobe-RGB, s-RGB, LAB and CMYK colour spaces.
  • One colour photographed using different cameras will be represented differently. CMOS chips from different producers have slightly different filter masks and sensivities.
  • Very same CMYK (the only colourspace for the print) colours will be printed differently on different type printers. Same applies for different brands.
  • Different colour types and different base materials will fade/age differently. Print some simple graphics, cover part of it and leave it for a week on sunlight.
  • Different screen setup (brightness, contrast, temperature) will also ruin your finetuned colour match.

There are also few extra points sligtly touching the topic.

  • There is no way how to match printed colour with the actual colour (of the advertised product) using CMYK colourspace. Except for the case when the product has the exact colour as the colour used in the particullar printer.
  • The way how to achieve, say Impreza-Blue (IB) and STi-Purple (SP), colours on the print is to use expanded colourspace of C-M-Y-K-IB-SP, where special inks IB and SP are used along the standard CMYK inks. These special inks are custom-mixed to the exact match. The Impreza-Blue colour is the metallic paint typical for the Subaru Impreza and STi-purple is the colour of the STi logo on the car.

tl;dr
To demonstrate the fact, that it is impossible create a square with #FF0000 colour.

Print this square using ink printer and laser printer. Use different papers - both dim and polished; white, "natural", shaded.

Show your customer the red square printed on the papers, on their (LCD) screen, your LCD screen, their smartphone, tablet, your smartphone, tablet, whatever devce you can imagine useful.

You can increase you argument payload by using different printer settings (photo-quality, standard, draft), different printer brands (HP, Canon, Epson, Brother, UTAX,...).


If it is usual for you to be asked to achieve this colour match, make yourself colour pallete of typical colours and draw it when needed. Combined with clients screen and smartphones it will make client-from-hell-proof argument. If it doesn't, run; run as fast as possible.

  • That is simply because the red is most likely out of gamut. But, when you are in gamut it certainly is possible to come extremely close. The problem is that print is much more sensitive to light conditions than sceens so to evaluate print you should do it in standard viewing conditions. – joojaa Nov 7 '16 at 16:47
  • @joojaa Good point. Use it to your advantage. I think that even if you are in the gamut, differences will be still present. Especially if you use low resolution ink printer and bright colour. – Crowley Nov 7 '16 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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