2

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 the webpage on Safari (on Mac) I noticed that the actual color of the text and image were different (this was not the case in Chrome or Firefox).

I have since read about how you should save web images using the sRGB color scheme.

However I need the text color (set to a HEX value by CSS) to be exactly the same as the actual image color displayed. However when choosing the color for the image I seem only to see the full range - i.e. not just the sRGB colors that are actually available to me.

It then converts the color to the equivalent/available sRGB color.


Is there anyway in Photoshop (or Pixelmator) to only use sRGB safe colors in the color palette?

2

3 Answers 3

0

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: http://www.gballard.net/psd/saveforwebshift.html

0
0
+100

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.

0
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.