CODEWITHSUNDEEP
htmlcsspngcross-browsercolor-management
Hafthor
Hafthor

Reputation: 16906

Color differences between images and html

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

Upvotes: 5

Views: 3690

Answers (6)

moonshadow
moonshadow

Reputation: 89115

Could be due to the browser's colour management.

Upvotes: 2

Chris Marasti-Georg
Chris Marasti-Georg

Reputation: 34650

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

Upvotes: 4

Joe Lencioni
Joe Lencioni

Reputation: 10531

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.

Upvotes: 1

Konrad Rudolph
Konrad Rudolph

Reputation: 545875

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.

Upvotes: 8

alif
alif

Reputation: 619

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

Upvotes: -1

Chris Johnson
Chris Johnson

Reputation: 10680

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.

Upvotes: 0

Related Questions