7

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.

Improve this question
2
  • Have you tried saving normally rather than for web?
    – Matthew Read
    Apr 8, 2011 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, 2011 at 23:17

4 Answers 4

Reset to default
3

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)

Improve this answer
2

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.

Improve this answer
5
  • 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, 2011 at 20:43
  • The AI is in RBG mode.
    – Matt Alexander
    Apr 7, 2011 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, 2011 at 22:08
  • @Sam, But the AI is in RBG mode.
    – Matt Alexander
    Apr 8, 2011 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, 2011 at 20:09
1

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.

Improve this answer
5
  • 1
    I completely disagree with this. But to each his own. I recommend some browsing: digitaldog.net
    – Scott
    Mar 13, 2013 at 18:28
  • The issue with that site, is that it’s for photographers. A different approach is needed for UI and web design.
    – Marc Edwards
    Feb 17, 2015 at 9:23
  • 1
    Color is color. It makes no difference if you are viewing a photograph or a ui. That's a very weak argument.
    – Scott
    Feb 17, 2015 at 15:29
  • 1
    Nope. The main difference is that UI typically isn’t colour managed — if you provide a file with an ICC profile and pixel that’s #ff0000, then iOS, OS X and Android will display it as #ff0000 with no conversion. If you do the same for a JPEG photo on the web or for print, the profile will be used to convert to the display’s colour space. They are absolutely NOT the same. People who argue they are clearly have no UI design experience.
    – Marc Edwards
    Feb 20, 2015 at 22:59
  • It’s also worth noting that profile conversion is a bad thing. It often leads to rounding (visible as banding) and clipping. If you can create with your display set up as sRGB with no conversion, you’ll be better off for it. Print design is not the same as UI design when it comes to colour management.
    – Marc Edwards
    Feb 20, 2015 at 23:01
1

Set Up a New Document

Sounds like you need to select "Web" for the "Profile" when creating a new document.

Select Web color profile

Fix an Existing Document

To fix an existing document, create a new document (with "Profile: Web") and then copy the contents from the old file the new one.

Set Document Color Mode to RGB

Improve this answer
1
  • 1
    I've been looking for the answer to this issue for so bloody long and WEB was the answer... just web ... thank you so much!!!
    – Sunneva Joh
    Apr 6, 2020 at 8:04

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.