Photoshopで書き出した画像の色がブラウザで見ると違う

外注先からもらったPSDを元にいつも通りコーディングをしていると、書き出した画像のカラーコードがブラウザ上とPSD上で異なる値を示していた。

ドキュメントのプロファイルはsRGBになっている

校正設定もちゃんとsRGBだ。設定は問題ないはず・・・

この設定で、たとえば青い部分の色を抜くと#43990と出る。

この部分をスライスして書き出す。書き出された画像の色に違和感は無い。

Firefoxで表示してスポイトツールで色を抜いてみると、#19278bを示す。はて・・・・

これは何故かと小一時間考えた末に分かったことがこれ。

どうやらカラープロファイルの埋め込みにチェックが入っているとこのような状態になるようです。
カラープロファイルとはデバイスや環境毎の見え方の差異を少なくするためのデータで、通常はこれにチェックが入っていないと色が変わってしまう場合があり、基本的にチェックを入れて書き出すのが基本です。しかしこのPSDの場合、どういう作り方をしたのか分かりませんが、カラープロファイルが悪さをしていました。

普通にデスクトップに書き出してみるとカラープロファイル有り無しでの色の違いは現れない。

しかし、ブラウザで見ると一目瞭然に色の違いが現れる。
以下にカラープロファイル有りと無しでスライスした画像を載せる。
※環境によっては全く同じ色で表示される場合もあります。

amazonも同じような状況になってる…

backgroundプロパティと合わせて画像を使用する場合はカラープロファイルのチェックを外そう。