Illustrator color changes on export, how to stop this?

[wondernatecotton]

When I export a graphic from illustrator the color is changing.   I switch my color picker to web safe RGB and set the color to #311a92.   But when it exports and I use it in a webpage it is slightly lighter.  I sample the color using a browser color picker and it #362f8c.   I am using the #311a92 all through my CSS so I need to be able to to get illustrator to export that acutal color.  

Here is what I have tried...

- Using just a plain square.

- legacy and regular export

- setting "don't color manage my document" under assign profile

- different jpg and png types

All with the exact same result. 

What am I doing wrong? 

[Monika Gause]

Do you "convert to sRGB profile" when using Save for web?

Does the browser perhaps use color management?

[wondernatecotton]

Is that the edit > edit colors > convert to RGB?   I did not try that before.  But I just tried that and that option is greyed out because it's already RGB. 

Thank you for the help thought!

[mglush]

Hi!

I tried to reproduce your color and issue to see what might be a good solution and I found that even though I typed in the hex color you noted above #311a92 and hit ok. When I went back into the Color Picker--it was already a different number -- 362f8a )even before I exposed it.

And, have you tried the Save for Screens Option? Here is a sample of the same color, viewed in Safari.

I've tried it a couple of times--everytime I type in your color number and then close the color picker box, when I use the eyedropper tool and sample the color it is not what I typed in it is 362f8a. I think the problem stems back to the Hex number.

How did you decide on your Hexadecimal color number?

Michelle

[Ton Frederiks]

Michelle, are you working with an RGB document?

[mglush]

Good question, and good catch! No--my color space was CMYK.

[wondernatecotton]

That was a good catch! I will test that out and see if I get the same

response.

On you question of where I got that hex color number...

I am using a web components library called mdbootstrap. It has a library

of color names so we can just reference those names in the code rather than

the hex codes. Here's the documentation link.

https://mdbootstrap.com/docs/jquery/css/colors/

The color I am using here is about one third down the page called

"deep-purple darken-4" with that hex code of #311b92.

I could try other colors I guess and see if I get the same response. I just

started testing this mdbootstrap library so I didn't even think to try

other colors. This is the first test graphic I created to work with this

library and I wasn't really trying others because of the failed test with

this first graphic.

Thanks again for your time and help on this!

On Tue, May 28, 2019 at 8:59 AM srishtib8795206 <forums_noreply@adobe.com>

[Omar.Fathy]

Working with web should be RGB colors.
You may do everything right but different screens cause different colors because every screen has it's color profile.
To make sure that everything will be perfect, you should use the same color profile of the screen you will use.

[Ares Hovhannesyan]

I can suggest you to work with web colors swatches. You can find them in "Swatches" or "Color Guides" panel.

Also use Save for web (legacy) export, compare different file formats then preview image in browser. Save web have that feature.

Also take in consideration that some browsers can show different colors.

In addition there is CSS properties panel in Illustrator which can export that object appearance for CSS

[Ton Frederiks]

Don't trust  a Browser color picker. Check it in Photoshop.

Exporting as jpeg does not always give you the same color, use png.

Make sure your document color profile is set to sRGB. You can check it here:

[mark-heaps]

Make sure you're creating/editing in an RGB document in Illustrator.

Second, make sure the color profile for your RGB document settings is set to sRGB so you don't see it shift when it gets to your browser.

If the color you choose isn't a websafe color, even within sRGB, you will see small shifts in some colors. Especially in blues/purples like your sample value.

So in your new document settings, change it from CMYK to RGB.

Then when that document is open, go to Edit > Assign Profile, then choose the sRGB working profile.

Export from there and then test.

[Ton Frederiks]

mark-heaps  wrote

If the color you choose isn't a websafe color, even within sRGB, you will see small shifts in some colors. Especially in blues/purples like your sample value.

Mark,

that is interesting. I know that some colors are changing when saved as jpeg,

But I never saw a color shift when saving to a lossless format like png from an sRGB document.

Can you give an example?

[bread_first]

I came to this thread as I experienced the same issue exporting from Illustrator, then opening in Photoshop.

• The artwork I was exporting contained a #00000 (RGB 0,0,0) graphic
• My Illustrator doc colour profile: RGB
• I was using the "export for screens > artboards" option
• I exported as jpeg 100 (with "Embed ICC Profile" turned on and off)
• When opening the jpeg in Photoshop, the black was visually not as black
• Using the eyedropper tool, the black was reading #231f20 (RGB 35, 31, 32) 

It was only until I tried the "Export > Save for web (legacy)" option that the black was still RGB 0, 0, 0 when opened in Photoshop.

I have been using the "export for screens" option regularly for ages, but never checking the colours, so I am not sure if this is a recent glitch or if it's been shifting colours all along. I typically use this feature when creating and exporting visuals for on-screen presentations or online uploads. 

[Monika Gause]

Which color profile is attached to your AI file?

And how do you handle color profiles when exporting for screens?

[bread_first]

 

[Monika Gause]

You're not embedding a profile. Save for web does that automatically. SO that might explain it.

[Ton Frederiks]

You do not embed a profile when exporting. If Illustrator Color settings or the Document Color Profile are different than the Photoshop Color settings you will have a problem.

[bread_first]

As mentioned in the bullet points above, I tried it with "Embed ICC Profile" turned on and off and both instances changed the black from #00000 to #231f20.

Unless the colour profile in the screenshot above is the incorrect colour profile?

[Ton Frederiks]

Did you check the color settings in both apps?

[Ton Frederiks]

Looks like a CMYK to RGB conversion.

[bread_first]

Nope. If you read my very detailed account of my settings and my process above, you will see that it is not a CMYK to RGB issue.

Anyway, in a nutshell I was able to get around the issue by using the Legacy route. The point of my post was just to make people aware (or mainly, make Adobe aware) that the "Export for screens" option does not convert colours accurately.

[Monika Gause]

Looks like a CMYK to RGB conversion.

By @Ton Frederiks

That rang a bell: there is an issue of "JPEG 100" causing a conversion to CMYK in some versions of Illustrator.

[Ton Frederiks]

It happens in the latest version. A CMYK document > Export for Screens has the "Embed sRGB profile" checked for the default jpeg setting.

[Ton Frederiks]

If you uncheck the inclusion of the profile, it still exports as RGB (which make sense for an export for screens) but Photoshop will report an missing profile for this RGB document. It would have been better to have the option to convert or not convert.

[Ton Frederiks]

I am totally confused now, it looks like Export for Screens is a little buggy.

Settings change by themselves. What was a setting that changed the color mode from CMYK to RGB (JPEG 100)is now a setting that keeps it CMYK, but the JPEG 80 setting still converts from CMYK to RGB.