Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Do you "convert to sRGB profile" when using Save for web?
Does the browser perhaps use color management?
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Michelle, are you working with an RGB document?
Copy link to clipboard
Copied
Good question, and good catch! No--my color space was CMYK.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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:
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
I came to this thread as I experienced the same issue exporting from Illustrator, then opening in Photoshop.
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.
Copy link to clipboard
Copied
Which color profile is attached to your AI file?
And how do you handle color profiles when exporting for screens?
Copy link to clipboard
Copied
Copy link to clipboard
Copied
You're not embedding a profile. Save for web does that automatically. SO that might explain it.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Did you check the color settings in both apps?
Copy link to clipboard
Copied
Looks like a CMYK to RGB conversion.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
It happens in the latest version. A CMYK document > Export for Screens has the "Embed sRGB profile" checked for the default jpeg setting.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.