匿名質問者

Web制作におけるPhotoshopとブラウザ間のカラーマネジメントについて教えてください。


どなたかご教示いただけると幸いです。
クライアントよりWebのキーカラーとして「rgbの数値でこの色」と指定されております。
Photoshop上でrgbで数値指定し書き出した画像のキーカラーと、CSSで同じようにrgbで数値指定したキーカラーがブラウザ上で同じ色に見えず困っております。
Photoshopで書き出す前の色と、書き出した画像の色は同じに見えますが、CSSでrgbを同じ数値で色指定したフォントと見比べる色が一致していません。
ググってみたのですが、保存すると色が変わる、書き出すと変わる、といった内容は見つかるのですがオブジェクトを作った段階からすでに色が違うという状況が出て来ませんでした。

Photoshopの作業用プロファイルはsRGBです。画像はsRGBに変換で書き出し。Firefox、Chrome、Safari、Opera、どれで見ても同様に違って見えます。当方Macユーザ。
クライアントから色が違うので揃えるように指摘されたのですが、キーカラー全てを画像で使用する以外に誰の環境でも同じ色に見えるようにすることは可能なのでしょうか。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2016/12/22 16:51:39

ベストアンサー

匿名回答1号 No.1

他2件のコメントを見る
匿名質問者

度々ありがとうございます。

そうですね。
HEXは灯台下暗しといった感じでした。HSLだとアルファ値もhslaで書けばいっぺんに記述できるので使い勝手もいいかもしれませんね。
最終的に書き出した画像から色を抽出するというのも視野に入れてみます。
sRGBとAdobeRGB、気をつけなければいけませんね。
Webは経験値がまだ低いので、Webの素材を作るためのPhotoshopスキルもまだまだなもので助かりました。

補足ありがとうございます。

2016/12/22 18:43:57
匿名質問者

何度もすいません。
色が違って見える原因がわかりましたのでご報告を。

質問の中にもちらっと書いたのですが、色が違って見えていたのはフォントに色を指定した場合でした。結論だけ書かせていただきますと、フォントにアンチエイリアス指定をしたところ同じ色に見えるようになりました。

回答者様のアドバイスを思い出しながら、色を抽出しようとキャプチャした画像を何気なく拡大表示して見ていたところ、フォントが印刷で言えば版ズレのような状態に見えていることに気づき、文字の境界線付近に赤っぽい色が見えていたため遠目で見ると違う色に見えるということに気づきました。

結果的には画像の書き出しの問題やhtmlの色の指定の問題ではありませんでしたが、新たな気づきをいただきました。本当にありがとうございます。回答者様の指摘がなければ気づけないことでした。感謝しきりです。重ね重ねありがとうございました。

2016/12/22 20:19:14

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません