Color differences between images and html

Asked 30/9, 2008 at 19:12 Answered 30/9, 2008 at 19:17

Solved html css png cross-browser color-management

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

Enjoyable answered 30/9, 2008 at 19:12 Comment(3)

possible duplicate of colors don't match on FF on Mac – Featheredge 4/3, 2013 at 15:22

except this Q was two years earlier and more general – Enjoyable 4/3, 2013 at 16:11

Sorry, I'm just trying to link them all together. – Featheredge 5/3, 2013 at 0:11

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.

Airmail answered 30/9, 2008 at 19:15 Comment(1)

Hey, almost as good as posting it myself! Thanks for the credit. – Mayes 30/9, 2008 at 20:3

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

Kiosk answered 30/9, 2008 at 19:17 Comment(0)

Could be due to the browser's colour management.

Ankylosaur answered 30/9, 2008 at 19:17 Comment(0)

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.

Presto answered 30/9, 2008 at 19:17 Comment(0)

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.

Azine answered 30/9, 2008 at 19:14 Comment(0)

-1

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

Humfrid answered 30/9, 2008 at 19:15 Comment(0)

Recommended topics

Hot tags