Colors Look Different In Browser And Photoshop

I have a problem with colors in photoshop and browser. Why the same color (#cccc66) looks different? This in photoshop http://gyazo.com/a4f4181bf0638d652174f0a7d4f1fe9d.png and thi

Solution 1:

It's called color profiles, the PNG has one embedded. You need to strip it out. Photoshop apparentely does weird things with "Save for Web" when color profiles are active.

This may help: http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

Open up any image on your machine and File / Save For Web. Next to the Preset option, there's a sneaky little arrow...click it and uncheck "Convert to sRGB."

Solution 2:

I think this tutorial should do the trick:

http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/

Also, you might want to have a look at this (it's basically the same, but with "Proof Colors" enabled in the "View" menu):

http://www.usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/

Solution 3:

How you export this image from Photoshop? Did you use Save for Web & Devices (File -> Save for Web & Devices)? Also you can have to set up proper color profile (Edit -> Color settings), because some formats have embedeed your current color profile.