人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号
ベストアンサー

https://developer.mozilla.org/ja/docs/Web/CSS/color_value

https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%AB%E3%83%A9%E3%83%BC

上記2つのURLを理解したうえで以下のURL
http://mizyupon-rpg.com/posts/612.html


匿名質問者さんのコメント
ありがとうございます。 さらっと読ませていただきましたが、個々の環境で同じ色に見えるようにするのが無理だという理屈はよくわかります。ブラウザの対応状況やモニタの問題など色が違って見える要因はたくさんあると思いますので。 ちょっと質問の仕方がまずかったとは思いますが、このような場合にはみなさんどう対処されているのかなと思いまして。 画像でsRGBのプロファイル情報のあるものとhtmlで記述したものが同じ色に見えるようにすることができるものなのかなと思ったのですが、やはり現状では無理なのでしょうね。あとでもう一度じっくり拝見したいと思います。 経験がある方なら、クライアントからこのような指摘が来ることもあまりないのでしょう。最初からhtmlだけで表現するか、全て画像で表現するかどちらかにするのでしょうね。 匿名ですのでポイント差し上げられないにもかかわらず、ご親切にありがとうございました。

匿名回答1号さんのコメント
対処法なのかはわからないですが、私は以下のような方法をとります。 ・HEXで指定 ・HSLで指定 ・書き出した画像から色を吸い出してHEXもしくはsRGB指定 見た目の色がほぼ同じになればいいと解釈してsRGBの数値そのものにはこだわらないようにするといいかと。 余談ですが、同じ色でもsRGBとAdobeRGBとでは数値が変わりますので気をつけてください。

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

匿名質問者さんのコメント
何度もすいません。 色が違って見える原因がわかりましたのでご報告を。 質問の中にもちらっと書いたのですが、色が違って見えていたのはフォントに色を指定した場合でした。結論だけ書かせていただきますと、フォントにアンチエイリアス指定をしたところ同じ色に見えるようになりました。 回答者様のアドバイスを思い出しながら、色を抽出しようとキャプチャした画像を何気なく拡大表示して見ていたところ、フォントが印刷で言えば版ズレのような状態に見えていることに気づき、文字の境界線付近に赤っぽい色が見えていたため遠目で見ると違う色に見えるということに気づきました。 結果的には画像の書き出しの問題やhtmlの色の指定の問題ではありませんでしたが、新たな気づきをいただきました。本当にありがとうございます。回答者様の指摘がなければ気づけないことでした。感謝しきりです。重ね重ねありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ