CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:
I have a graphical question about my test site. The header and main page background are pulled from the same original graphic and in Firefox the header and body match up fairly well (I still need to do a little work to get the patterns to match up better) but in Safari the shade of brown looks completely different between the header and body creating a seam where they meet. Do you have any idea on how I can avoid these differences in safari?
I opened his site in both Safari and Firefox and indeed, I saw the same problem. Here is a screenshot of them side by side:
See the color clash below the photographs and before the first post? Yikes. My first thought is to find both of the images and take a closer look at them in Photoshop. Here is the header image and here is the body image. Check out what happens when I drop the body image square on top of the header image:
On the lower right there, you can see the body image square plain as day. That explains what is going on in Safari. The images clearly have different shades of that tan color so the clash makes sense. So what the heck is happening in Firefox?! Does it have some kind of super-genius color-matching abilities?
Norm offered to send me the original file that he created both the header and the body images from. I thought I would compare the live graphic files to this to see if that would uncover any information. I opened this original file and placed the body background square over this, and…
It matches perfectly! Hmmm… So it seems like if both of the files were originally created from this original file, then something happened while exporting the top header image that is changing the tone of it somehow. Right away I considered color indexing. Since the top image has a much wider variety of colors it is dealing with, if the images were color indexed the top image would have much less colors to dedicate to the tans which could explain a tone variation. Since both the images are JPG’s, and color indexing only happens with GIF and PNG, this is not the case.
Then it struck me…
Ah ha, it’s color profiles!
I really should have thought of this right away, but sometimes simple answers are the most elusive. I remembered that Safari is one of the only browsers that actually supports color profiles of images. A quick “Get Info” glance at the two images reveals the true problem:
The top image indeed was exported differently, it’s using a “Calibrated RGB Colorspace” while the body background image was using “sRGB”. This is likely caused by saving the images from Photoshop in different ways. If you “Save As…” from the file menu, you will have the opportunity to save your color profile along with the image. If you “Save for Web & Devices…” the “sRGB” (best for the web) color profile will be automatically applied (in CS3 anyway).
So there you have it. It wasn’t Firefox being super-smart, it was actually being dumb and just looking smart. Like Reese Witherspoon.
The purpose of these color profiles is something I could into another time, but the important thing to remember to avoid problems like Norm’s is to make sure all your images were exported in the same way and so they either don’t have a color profile or all have the same color profile. This will ensure that the site, at least color-wise, renders the same from browser to browser.
To check whether your browser honors color profiles (and how well), check out the ICC page on the subject.
Brilliant. I rarely use my Mac because most of my daily work requires PC-specific tools and IE compatibility (to my chagrin). This is a very useful debugging tool. Now if I can just convince the world to ditch IE so we can have native PNG transparency…
Also, I thought I was the only Reese Witherspoon hater… glad to see there are like minds out there.
Good post, but I have similar issue that I cant seem to fix. I have a header image on a background with the color defined with a CSS rule. I use the same values from the CSS to set the background color of the header in photoshop when I create the header image so it blends in.
In firefox there is no issue, in Safari they are a different shade from each other. Using the DigitalColor meter application in OS X it tells me they are a different color even though they both have the same values.
In this example you solve it by giving both images the same profile. Because I am using CSS I can’t assign a color profile to that.
Any ideas how to fix this??
I am having the same problem.
what makes it worse is if you go to kuler.com and type in a hex.
open that in chrome and safari next to each other, than colour pick it, than they show different values.
even if i make it 255,0,0 chrome gets it right, but safari reads, 251,0,24
very strange
Brilliant. I never even thought of this. i had exactly the same problem before. Thanks for the information! Now if I could just get explorer to work with me.
I’ve been having this problem lately too, except I have been exporting everything in the exact same way.
Hey Chris, you should post some links to sites that you’ve designed to inspire all your CSS Tricks Students.
Wow. I had no idea that Safari supported color profiles. Very interesting and useful, thanks Chris!
Thanks for spending time on this question Chris, greatly appreciated! I will leave the page up for a while as an example and work on it next week.
Learning a lot from your posts, thanks again,
Norm
Great article, Chris. Sometimes it’s the (seemingly) simplest things that cause us the greatest problems… like when our tools decide to try and “help” us without our knowledge. :)
Excellent article.
I currently do not have access to Safari or other browsers than IE 7 or Firefox but I have heard complains about this.
I’m surely be on the look for small mistakes like this in the future.
Yeah thanks for this and lesson learned!
thank you!! great tip!!
I have been dumbfounded about this problem with some of my own sites, but never spent the time to solve it. Just a quick check for the same color hex in photoshop. Your post made me go “doh!” and give myself a slap. I should have known.
I’m pretty sure the problem some of you are experiencing is due to the fact, at least before CS3 apparently for those who may have it (I don’t), is that you must convert the color profile to sRGB before saving it for the web. I’m using Photoshop CS and know that if you don’t take that specific step before saving, assuming you are working with a different color profile to begin with, you can get some funkiness.
I don’t know how to accomplish this in editing software other than Photoshop, but as for PS:
Image > Mode > Convert to Profile …
Understand that “Convert to Profile” and “Assign Profile” will not accomplish the same thing. Convert will keep your colors the same, as much as possible, anyway.
By the way, I don’t think that you should call Firefox dumb, or Safari smart, for rendering images the way they do. I think you may reverse that completely. It seems more like an I.E. sort of decision on Safari’s part, albeit with more logical and certainly good intentions.
Why should we continue down the futile road of having browsers render the same content differently? Yes, I know the content wasn’t really the same as pertains to the profiles, but I’m struggling to come up with a reason that this is important for the web, especially since it will and already does cause problems.
The only use I see for color-profile aware browsers would be to teach people about differences in color profiles. That, however, could be done with screenshots and the like.
This only causes more confusion and difficulty which I thought we were getting close to stomping out. I say, “Safari is being dumb.”
Hi, I work for Mozilla and wanted to let you know that we have added color management support to Firefox 3, which is currently in beta. We’d love to have people who care about color management on the web test the Firefox 3 Beta and give us feedback. Please note that color management will not be enabled by default to prevent subtle color variations affecting the overall look of web sites. To enable it you must set gfx.color_management.enabled to true (via about:config) and restart Firefox 3 Beta.
I just turned on this setting, and what a change…
MUCH better colors!
I had a problem with a green header (a png image) which in firefox had more borring colors, than i safari. After turning the color management on in firefox I got more vibrant colors.
But of course this doesn’t help all the others viewing my website.
Hello Gen,
Thanks for popping in to let us know. I’ve been playing with FF3 but I didn’t know about the support for color profiles. If there is anything else you want to share about the subject, please let me know.
Can someone fill me in as to why this is important for the web? I’m for color management, but as for viewing things on the web I cannot figure out why this is necessary.
I honestly believe this is senseless. I at least give kudos to Firefox for keeping the default to false.
Thanks for sharing this. Very useful.
@Brent: From mozilla:
Yes, but that’s a canned answer that doesn’t really get to the point. I’m a photographer and certainly am aware of the need for color accuracy. I’m just saying that as pertains to the web and how to accomplish color accuracy for web viewing, it makes no sense. There should be one standard color profile for the web. Having more (which equals having no standard) will only create problems.
To be sure that everyone is seeing the correct colors not only depends on icc profile aware browsers, but accurately profiled monitors. It’s not solving anything until we can assure that every viewers monitor is correctly profiled. How can Firefox, Safari, Opera accomplish that?
I say we need one standard. If prepared properly, the colors will be accurate. Anything that is so critical beyond the ability of sRGB viewing isn’t something that professionals are going to rely on normal web viewing for anyways. More than likely, anything critical will be FTP’d, or even emailed.
Thanks for the Mozilla quote and your time, Chris, sincerely. I know I’m not arguing with you, so please don’t take it that way. I’m just posting to see if anyone has a different take. Again, I’m all for icc-profiles and color accuracy; I’m just not convinced that this particular approach is the right one for the WWW.
I think you bring up some great points Brent.
The web will probably never be able to calibrate color on peoples monitors, nor should it. And because color profiles are only half of the puzzle of color accuracy, is there any point to supporting adding support for color profiles? Doesn’t it make more sense to use one standardized color profile? I really don’t know the answer to that.
What about the “lipstick” example… A lipstick company might sell 100 different shades of red lipstick, and in order to do that online properly, they REALLY need to be as accurate as possible with the color they are displaying in those images. What if there is no perfect shade available in sRGB to get the job done? Wouldn’t it be good to use a color profile that could come closer? But what happens then when someone is using a browser that won’t use that color profile? Will it degrade nicely to sRGB and be “close”… or will it be WAY off?
If there is a way to make sure that the images with color profiles attached “gracefully degrade” I could see color management being pretty awesome for the web, but without that, seriously problematic. Also, this really should only be used for like “product shots” or “color samples” and not for images making up the page design. As we saw in this article, images used in actual page design should be built to as wide a standard as possible.
Thanks for your thoughts, Chris. I feel like there probably is a good use for icc-profile aware browsers, but for now it still escapes me a bit. We’ll see where it goes …
Wow thanks for that, never would have guessed. Very helpful.
Hey Chris,
Any thoughts/tips on correcting colors between images and CSS? I have an image that is supposed to blend into its background, but Safari shifts the image colour. I’ve check in PS CS3 and the color profile is sRGB. Not sure what’s going on, but it’s quite infuriating. In PS, the source image and a screen shot come out as the same hex code, but are clearly different visually.
Thanks for any help,
georges
@georges: Did you check both images to make sure they were sRGB, not just one of them? If you have a URL with the problem, I’m sure we could sort it out.
Chris, thanks for the speedy reply. Turns out GammaSlamma took care of the problem. I guess the embedded gamma correction in my PNGs was doing it and not the color space issue.
I think my problem is PNG specific. I’ve found a bunch of pages about web color management and PNGS are singled out as being problematic.
For anyone else that stumbles across this post and these comments, you can get gammaslamma at: http://www.shealanforshaw.com/ . Alternatively, for Linux and Windows machines, google PNGCrush.
Hope this helps someone,
georges
Thank you for this entry. I was having the exact same problem, but all is well now.
An interesting article that certainly headed me in the right direction, but trying to match a graphic with the same colour as the CSS background failed for me, even after various combinations of setting Proof Setup to Windows or Custom sRGB and checking Convert to sRGB in Save for Web & Devices. What did work though was turning the ICC profile off – I thought this was to standardise everything?
This is an awesome article. I created a jpg in CS3 with the same backgound color as I had set in the CSS code. In Safari they didn’t match up at all. Thanks for the help.
Great article! I had a similar issue with image rendering btw Safari and Firefox, except it was backwards. Safari was rendering a nice colorful picture, and firefox was displaying something rather dull. This article really helped me solve the issue. Many thanks!
i had this problem recently too, i saved for web all of my navigation images and had to make a simple change to one and saved as instead, it only became apparent the problem when viewed under safari.
great article!
I’ll echo what the critics above me have said: the fact that I cannot turn Safari’s color-profile superpower off makes me frustrated, not excited, over the feature.
Being a victim of gradient hype I miss being able to put a matching hex code in the body together with the gradient bg-image without having to worry about Safari. Turning ICC off didn’t work for me – instead I’ve resorted to creating a wrapper for the gradient, then putting a very small repeating bg-image of the intended background color in the body. Obviously this is far less clean and simple than having ONE background image together with its hex.
There just has to be another way around this!
Oh, man, thanks a lot! This was killing myself today, very useful article. I even started to think that it’s nothing I can fix, I didn’t expect SO simple solution.
Thanks again.
THX :D i’ve got this problem and i solve it thanks to You :)
ive gt some differences betwen jpg and png over safari and firefox. ive opend jpg file and save it as png and it works. at the beginning i was doing that this way : vector=>png(problem safari!=firefox)=>jpg(problem safari!=firefox), and now vector =>jpg=>png(problem none)
thx ;)
sory for my.. en ;) i hope that You understand me ;)
Wow, thanks so much for this article. It just saved me, big time! I was about to through the mac out the window…
Thank you! Brilliant. Wow. I’ve been wondering about this for quite some time.
Thanks so much for this article. I was pulling my hair out trying to figure out why my gradient header was perfect in IE and Fox and not Safari. Sure enough I different color profiles for elements that were supposed to match. All fixed: http://www.wiretotheear.com
I have encountered this problem several times, but my problem is that I don't use Photoshop, I use GIMP (because I'm poor, boohoo). Anyone knows how to create an image without a color profile in GIMP?
Not just JPEGs. There is a similar issue with PNGs that have an embedded "Gamma".
Thank you! Your post has a solution for a problem I have with a new theme that I'm trying to use in my blog, but I still have some others :(
Great! Thank you very much.
Jerry
I had the same issue with IE 7 not rendering correctly and Firefox looked great. Your post helped me fix it. Thanks!!!
Oh good lord, thank you for posting this. I just ran into this problem with a design today for the first time and thought, “Well there goes half my day trying to track down a fix to this totally bizarre problem.” Luckily, I hit on this article first…thank you for writing this up!
This helped me out so much. Thanks!
Use ImageOptim on all your JPEGs and PNGs to remove the color profile. Problem solved, not to mention optimisation of PNG files since Adobe makes really bloated PNG files.