ブラウザのカラーマネジメント:FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-02-08 17:00:00
  • このエントリーをはてなブックマークに追加

【B】の画像がくすんだ色で表示されるわけ

 2枚の画像の色空間は、【A】がsRGB、【B】がNTSCとなっており、sRGBの環境で表示を比較している。sRGBは、プリンタやモニタなどの色の扱いを統一するため、IEC(国際電気標準会議)によって策定された色空間の標準規格だ。現在では、多くの機器やアプリケーションがsRGBを標準の色空間として採用しており、CSSの標準規格においても、「CSSで指定する色はsRGB色空間で扱う」と定義されている。

 一方、NTSCはテレビ信号の規格だ。sRGBとNTSCの色空間を比較すると次のようになっており、NTSCの方が扱える色の範囲が広いことがわかる。そのため、カラーマネジメントを行わずにNTSCの画像をsRGBの環境で表示すると、すべての色を再現できずに色がくすんでしまうことになる。

CIE色度図にsRGBとNTSCの色の範囲を大まかにプロットしたもの。CIE色度図は人間が見ることのできる色の範囲を図示したもので、媒体ごとの色の範囲を簡単に比較することができる。 CIE色度図にsRGBとNTSCの色の範囲を大まかにプロットしたもの。CIE色度図は人間が見ることのできる色の範囲を図示したもので、媒体ごとの色の範囲を簡単に比較することができる。

カラーマネジメントの仕組みとカラープロファイル

 カラーマネジメントを行った場合、オリジナル環境での見た目の色が変わらないように色空間の変換処理が実行される。このとき利用されるのが画像に埋め込んだ色情報で、この情報は「カラープロファイル」と呼ばれている。

 ただし、変換処理を適切に行うためには、画像に埋め込んだ色情報だけでなく、画像を表示する出力環境の色情報も必要となる。Webブラウザで表示を確認する場合、出力環境はモニタとなるため、モニタのカラープロファイルを設定しなければならない。より正確に色を再現するためには、定期的にモニタのキャリブレーションを行うことも重要だ。

 なお、Firefox 3ではabout:configのgfx.color_management.display_profileで出力に使用するカラープロファイルを指定することもできる。MozillaZineによると、gfx.color_management.display_profileを指定しなかった場合はOSの設定を、それもない場合には標準のsRGBのカラープロファイルが使用されることになっている。

CSS 3におけるカラーマネジメント

 CSSで指定した色の標準の色空間はsRGBと定義されているが、CSS 3の勧告候補CSS3 Color Moduleでは、color-profileプロパティで任意のカラープロファイルを指定できるようになっている。

 現在のところ、FirefoxやSafariはcolor-profileプロパティをサポートしていないものの、対応すればWebページの色空間を細かく指定できるようになるだろう。sRGBより多くの色を扱えるデジタルカメラやプリンタも増えてきており、Internet ExplorerやOperaも含めて、今後のサポートに期待したい。

  • コメント(2件)
#1 anonymous   2009-11-25 19:06:33
とても参考になりました。
コーダーやってますが、デザイナーからの元データに泣かされいろいろ調べておりました。

この手の「ややこしそうだな」というトピックを正確に掘り下げてもらえるのはうれしいですし、媒体としてとても信頼できちゃいます。
#2 cocoro   2011-09-09 22:28:02
Fire foxではあまりに色が違いすぎて困り果ててました。おかげさまでかなり近い色に設定出来ました。ありがとうございます!
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]