Color differences between images and html

Question

I'm having issues with color matching css background colors with colors in images on the same html page. What gives?

Answer 1

Three possibilities spring to mind:

• check that your monitor colour depth is set to 32- or 24-bit, not 16-bit
• check that the image isn't being assigned a palette (such as the web-safe palette). This might be the case for a .gif or 8-bit .png image.
• check for .png gamma correction issues in IE - see other posts for details

A workaround that I have used in the distant past is to set the background colour by repeating a small image, instead of setting it in the HTML. This kind of trick was useful in the days of web-safe palettes and so on, but less useful now.

Answer 2

Probably the browser your testing, I've had a lot of trouble with ie 6.

Answer 3

I'm guessing that you use a PNG image? This is a gamma correction “feature”. Mark Ransom has posted a useful text about this.

Notice that the pngcrush solution listed somewhere hasn't worked for me.

Answer 4

It might be a color profile issue.

For instance, if the image is a JPEG and has a color profile and your browser doesn't support displaying images in the color profiles that they specify, the colors of the image itself will render differently in your browser. In this situation, if you checked the color of the image in Photoshop (color profile aware) and then applied that color in your CSS and viewed the page in a browser that is not color profile aware, it would look different.

Answer 5

What image editing program are you using? I found this article about Photoshop color profiles. There can also be issues with PNG gamma correction.

Answer 6

Could be due to the browser's colour management.