Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 1 down vote favorite

I have a web design layout in AI that I'm trying to slice up into HTML/CSS. I'm having trouble keeping the colors the same in the exported files as they are in Illustrator.

When I open it up in Illustrator CS4 and use the eyedropper tool to check the color of the logo, it's #AB336B. Ultimately, this is the color I want the logo to be after I export it.

But when I open it in the "Save for Web & Devices" dialog and sample the color from there, it says it's #CA006C, even though it still looks like #AB336B:

After some Googling, I have a feeling it's related to color profiles, but I'm still not sure what do do to fix my problem.

share|improve this question
Have you tried saving normally rather than for web? – Matthew Read Apr 8 '11 at 14:58
Is it inside the Gamut Range? At least CS5 version of Illustrator forces CMYK colors to be inside the Gamut Range by default. – Ars Magika Apr 12 '11 at 23:17

3 Answers

up vote 3 down vote accepted

Sounds like a problem with the working ICC profile. Have you disabled color management?

If you haven't already, go to Edit -> Assign Profile and select Don't Color Manage This Document.

I can duplicate the problem mentioned to an extent (getting various sample values, though not getting the same #CA006C) by changing the assigned profile. (FWIW, using AI CS3 on Windows)

share|improve this answer
up vote 2 down vote

In Illustrator, are you working in RGB or CMYK? If you're working in a different color profile than the intended end destination you're going to get some variation because of the translation. If you can figure out what your "final destination" is you can apply that in Illustrator and you shouldn't have this problem.

share|improve this answer
I can confirm that the situation as stated in the original question occurs in Illustrator CS3 when working with a CMYK document, and that it does not occur when working with an RGB document. I have all color profiles disabled to the extent possible. – horatio Apr 7 '11 at 20:43
The AI is in RBG mode. – mattalexx Apr 7 '11 at 20:56
I concur with horatio. I was able to duplicate OP's described behavior when doc mode is CMYK. When set to RGB I don't see the issue. – Sam Apr 7 '11 at 22:08
@Sam, But the AI is in RBG mode. – mattalexx Apr 8 '11 at 18:59
@mattalexx, I don't know what to tell you. I can't reproduce your error. One thing I did notice, if I set the color of the object to AB336B (in RGB mode), then switched it to CMYK, then straight back to RGB the color had changed to AB326B. I'm using CS5, btw. However, the difference between CA006C and AB336B is huge, so I have no idea what is going on. Can you duplicate the problem with a fresh file? If so, what steps did you use? – Sam Apr 8 '11 at 20:09
up vote 1 down vote

There's a few important points required to ensure colours are correctly maintained when working on web or app designs in Illustrator. Some of the settings below affect the appearance of the preview within Illustrator, while other affect the appearance of the exported files.

In my opinion, it is important both are correct. Here's what you'll need to do:

  • Ensure the document is set to RGB colour space (not CMYK).

  • Appearance of Black under Preferences is set to “Display All Blacks as Rich Black”.

  • Your Color Settings use your display's profile (this only affects previews in Illustrator).

enter image description here

  • Your document's color profile is set to “Don't Color Manage This Document”.

enter image description here

  • When using Save For Web & Devices, you disable “Convert to sRGB”.

Yes, there's a few things to change, but you'll be better off for it — all color values will remain exactly as you set them, display correctly and export correctly.

Once you've set Illustrator up like that, you should do the same for Photoshop.

Please note: These instructions were created using Illustrator CS5, but I've been doing the same thing for a while a tested the same settings on many versions of Illustrator and Photoshop.

share|improve this answer
I completely disagree with this. But to each his own. I recommend some browsing: digitaldog.net – Scott Mar 13 at 18:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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