Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
1  
Are you using Safari 6 for Mac? This discussion may be of interest: feedback.photoshop.com/photoshop_family/topics/… –  Marc Edwards Oct 31 '12 at 11:02
    
+1 for the question and bounty. We've debated this issue before - see sRBG Photoshop and color picker proofing and What should I do regarding color profile when designing for the web. There's an answer in all that material, but it would be great to have a clear, straight to the point answer on the best way to get color consistency on maximum devices at minimal cost to richness etc. –  user568458 Nov 1 '12 at 16:47
add comment

3 Answers 3

up vote 0 down vote accepted

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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