Help: colours from AI Draw .png exports with standard Color Profile displaying differently on websites? Better to remove Color Profile? | Micro.blog designers @CDevroe & co pls advise!

I design mainly using free/easy Adobe apps, like Adobe Spark web app.

Adobe Spark remove the Color Profile.

AI Draw export with a pretty standard Color Profile: sRGB IEC61966-2.1

It seems that Color Profile does not work well on the web!

On both, I’ll choose a hex color, and for my Cerulean Sounds work, that is often, well, Cerulean, or in hex words: #007ba6 aka RGB ( e.g. my latest single “island”… (out Wednesday, run it up!)

But when I export from AI Draw with the Color Profile, it causes an issue: it appears different compared to the true #007ba6 colour on the background.

Below I refer to the album artwork image exported from AI Draw as ‘Adobe’, and the background of the Carrd website as ‘background’

When you open Adobe in Preview, and inspect with Digital Color Meter:

sRGB gives the ‘true value’:

Native & Adobe RGB give different values:

Native:

Adobe RGB:


Now when I publish the artwork on my Carrd site, which has background #007ba6, the colour on the image looks distinctly different from the background colour.
N.B. this doesn’t happen when the the image is exported from Adobe Spark without a Color Profile. For an example, see:

cerulean-colour.carrd.co User: guest PW: 337aa3

Below I summarzie the Digital Color Meter tests, giving just the Red value for brevity. See Appendix for full values

Firefox on Mac displays pretty much same as Preview.

It would seem that there is a similarity between applying the Color Profile to the image, and viewing the background in Brave instead of Firefox, in that it pushes them to have higher Red values, as set out here:

What is interesting is that for the Adobe image image viewed in Brave, the effect seems to have ‘doubled up’ and it’s been pushed even further to the higher red values in a similar pattern.

Moving to a Solution

My main priority is reliably getting consistency between web background and images.

I could change the hex value to put in website background to get that to be the same as what is displayed:

I converted the Carrd to RBG (51, 122, 163) = Hex #337AA3

Is this the “true” colour? This articlesuggests the Color Profile in question is correct and the most reliable.

0. Does the Carrd background is displaying the true hex value?

It is possible that Carrd backgrounds are displaying wrong. I’m querying this with them.

More likely, they are using standard practice and I need to adapt the images to work with it:

1. Change images

As recommended on StackExchange there is a method which works for .jpg.

As shown on cerulean-colour.carrd.co - and the version I went live on Linkstagram.CeruleanSounds.com - stripping the color profile does make it look identical to website background.

But as other Adobe users have discovered, this doesn’t work for .png.

I could switch to using .jpg but I generally prefer .png because it has the transparent background option

2. Figure out different hex value to put in Adobe to eventually look same as website?

I don’t know how to reverse engineer this out to be honest!

Appendix

Digital Color Meter full test evidence

On Firefox, Whereas the background has the “correct” Native RBG:

The image still has the “wrong” one, like on Preview:

Here’s where it starts getting really weird though: when you change Browsers.

On Brave (Chromium):

the site background now has the native RGB that the Adobe exported image had on Firefox & Preview!

which itself, has shifted to another new value (which is close to the Adobe in Preview)!


As for sRGB, the one thing the original Adobe export in Preview was ‘correct’ on:

on Brave: it shows it’s shifted to the ‘incorrect’ Preview Native values:

Whereas the website background is ‘correct’:

While on Firefox:

it displays the Adobe image as ‘correct’, but only when Red is ‘clipped’ on my Desktop screen:

while the background gets a slightly off value:

But on iPad sidecar it displays the same values as Brave.


As for Adobe RGB, I won’t include screenshots, but here’s the values

Brave (+ Firefox on iPad Sidecar):

Background: (69, 122, 163)

Adobe Image: (80, 121, 159)

Firefox on Desktop Mac:

Background: (51, 124, 167)

Adobe Image: (69, 122, 163)

Side-note

a) When I take Mac Screenshots of the Firefox Mac screen, the divergence between the two colours becomes minimal (you’ll notice that on screenshots above they look almost indistinguishable), even though to my naked eye the divergence between the two colors appears of the same magnitude to the Brave.

Rejected Hypotheses

Hypothesis A: Rejectedit’s because it’s not a “web-safe” colour.

Of the 16 million+ (16,777,216) hex colours, 216 are deemed to be “web-safe”.

I could switch to using 069 (which I’m sure MC Beastly would be keen on):

But according to html.com: Modern graphics cards produce 24-bit color, so being “web-safe” isn’t a concern for them. So not sure this is what is causing it.

Hypothesis B: it’s because Adobe output colours differently.

This is what is suggested to this decade-old Adobe Illustrator user, that he needs to switch “Don’t Color Manage this Document” on Color Profiles.
There seems to be some disagreement, but some people think you need it on either CMYK or RGB color space.
That doesn’t seem to be an option to adjust that on AI Draw for iPad or Adobe Spark.

*****
Written on
Sub-topics | First Time Here?


Designed by Crystal x