: Colors appear differently on webpage when saving in sRGB I've made a webpage with an image next to text, set as the same color I thought I had used for the image. However when I looked at

@Pierce403

The problem is properly that your image has a colorspace added.
If you remove the colorspace form the image you will see that both your css value and the image colors are exactly alike.
The background is that a browser's CSS doesn't have a 'colorspace' so it's rendered through the colormanagement of the display 'as is' while for a image there might be some matching going on the meet the needs of displaying the image colour accurate.

In the past this was only a issue with Safari, but later other browsers started to support colorspaces for images. So in the past only Safari would show this issue, nowadays more browser's show this issue.

Vote Up Vote Down

@Rambettina927

I'm afraid you're kinda at the browsers' mercy here. All the browsers convert colors in their own way. One constant (last I checked) is default color management, if available at all, will ignore 'untagged' elements, ie CSS/HTML and untagged images (for some browsers).

I imagine what you're seeing is a color managed image next to type rendered directly in your monitor's space with no compensation. I'm not sure that Safari still does it that way but other browsers will.

You can try to compensate for the effect on your monitor and preferred browser. You might get close. Just don't expect anyone else to see what you see unless you have a very narrow group of visitors ;)

Here's a relatively quick read that does a nice job of explaining the issue, browser by browser. Jump down to the section titled COLOR MANAGEMENT SUPPORT BY BROWSER. The rest is for people who don't know what color management is.

Vote Up Vote Down

@LarsenBagley460

Where are you grabbing your hex value from? Inside Photoshop?

Have you tried using something like Xscope to grab the hex value from the image in the browser? Rather than messing around with color spaces, that may be the quickest way to go.

That said, take a look at this article on color spaces and that color shift you're seeing: www.gballard.net/psd/saveforwebshift.html

Vote Up Vote Down