Illustrator Color Matching Issues
Friday, 4 September 2009 @ 20:02I have been using Illustrator to create web designs – I much prefer it to Photoshop because of the ability to create precisely sized objects and to position them numerically. The problem – and I believe this is true in Photoshop as well, is that what you see is NOT what you get.
Herewith the issue. I create a color, using any of the available tools, say, #EE0022. I apply this color to an element, then do a “save for web”, and save it as a png. I then insert this element into a web page and when viewing the web page I notice that the color is not what I “saw” in Illustrator – the web version seems a bit less saturated.
So, using a color meter application, I sample the Illustrator image and note that it reads #E50020, even though Illustrator is telling me the color is actually #EE0022. I then use the tool on the web image and it reads #EE0022. So, the color is actually being saved as what Illustrator says it is, but when viewing it in Illustrator it is decidedly different, as confirmed by the color tool.
I have my color profile set to sRGB, the document color mode set to RGB, so that is not the issue. I thought I understood the whole “color management” thing, and actually have been pretty happy with my print work, but the web color management thing is not making sense to me. I did a bit of Googling and apparently I am not the only one who has come across this problem – but I was unable to find any sensible answers. There were lots of “calibrate your monitor suggestions”, which obviously makes no sense since I am viewing EVERYTHING on the same monitor, but nothing really helpful.
It seems clear to me that Illustrator is applying some kind of color profile to the image when viewed within Illustrator, but then saving the actual color values without any profile. Since the profile I am using is sRGB, i.e. a computer monitor, I can only say “HELP”. I have already tried turning off color profiles and everything else I can think of, but no luck. One thing I did notice is that if I create elements in Fireworks, it maintain color fidelity. But I hate Fireworks and do not really want to learn something new for no good reason.
Has anyone else run into this? If so, some guidance – or even empathy – would be greatly appreciated!
Roi Agneta
I really wish Illustrator was a better web tool, but it just isn’t. I was about to recommend Fireworks, until I got to the end of your post.
Actually, I’m still going to recommend Fireworks. I fought against learning it for a long time but it really is the best tool for web design. I used to comp in Illustrator then export to Photoshop to save everything for web, but it’s ridiculously slow and inaccurate. Why not just use the tool that is intended for the type of work you are doing? The initial pain will be out-weighed by the time and headaches it eventually saves.
In Illustrator go to the View menu and change Proof Setup to RGB Monitor. I’m guessing that’s your issue.
ROI – what are the color settings you are using in Photoshop? That is likely your issue. I personally don’t like Illustrator for Web design. It can only create basic layouts, you have to do all of the pixel-perfect tuning in Photoshop.
Go to ‘Edit > Color Settings > RGB: sRGB IEC61966-2.1′
If your file still doesn’t look right, open the file, go to ‘Edit > Assign Profile’ and assign the profile listed above.
That should give you the richest on-screen appearance in your working palettes.
Ken – you are right! Thanks so much, that was driving me crazy.