ブラウザでの色の表示の違い

補足

Mozilla 1.0では、ここで検証したMozilla 0.96と、色の表示が変わっています。どうやら、Explorer(Color Sync使用の場合)と同様な表示になるようです(正確には、詳しく検証しなければなりませんが)(2002-07-15)

結論

使用画像

#000000 #333333 #666666 #999999 #FFFFFF

Photoshop Elements設定ウインドウ Adobe Photoshop Elements
Web用に保存コマンドで、保存。
設定 カスタム
PNG-8
特定
ディザなし
カラー 256

この設定での保存ならば、PNG画像にカラープロファイルが埋め込まれているはずだ。GIFは原則使わないので、PNGのみ検証することにした。

テスト環境

iMac DV
Internet Explorer 5.0
iCab 2.6
Mozilla 0.9.6
(OS 9自体の、Color Syncは調べても未だよくわからない。モニタコントロールパネル-カラーにある、ColorSyncプロファイルは、iMacに設定されている。)
画面上の色の計測は、DigitalColor メーターを使用した。

Internet Explorer Color Syncの使用・不使用設定ウインドウInternet Explorerでは、Color Syncの使用・不使用設定できるので、それぞれわけて検証した。

検証した数字一覧

  PNG画像を、ブラウザで表示し、画面上で計測した色の数値。bgcolorで指定したセルの色を、画面上で計測した数値。
PNGの画像bgcolorでセルの背景色を数値指定
正確な数値(本来の色)
=iCabでの表示
Explorer
Color Sync使用または不使用の時
Mozilla 0.9.4Explorer
Color Sync不使用の場合
iCab, Mozilla
Explorer
Color Sync使用の場合
#FFFFFF "#FFFFFF""#FFFFFF""#FFFFFF""#FFFFFF""#FFFFFF"
#999999 "#999999""#949494""#8A8A8A""#999999""#898989"
#666666 "#666666""#606060""#555555""#666666""#535353"
#333333 "#333333""#2E2E2E""#252525""#333333""#232323"
#000000 "#000000""#000000""#000000""#000000""#000000"

Explorer(Color Sync使用の場合)、Explorer(Color Sync不使用の場合)、Mozillaにおいて、 PNG画像とbgcolorで指定したセルの色との数字が異なる。次の、ブラウザによる色の明度の違いは、このことを検証している。

ブラウザによる色の明度の違い

exampleでは、テーブルのセルに、bgcolor="#666666"を指定し、その中に#666666色のひとまわり小さいPNG画像を配置した。
Internet Explorer(Color Sync使用の場合) 外側より中側の画像が明るい
Internet Explorer(Color Sync不使用の場合) 外側より中側の画像が暗い
Mozilla 0.96 外側より中側の画像が暗い
となり、Explorer(Color Sync使用の場合)とMozillaでは、色の明度が逆になってしまう
他の場合では、1色になる。

example

#666666

ブラウザによるexampleの見え方比較。ブラウザによって表示する色が異なるので、今、あなたが見ているブラウザにおいて正確に色は表示されていない場合があるが、おおまかな見え方は次のようになる。

Explorer(Color Sync使用の場合)のexample Explorer(Color Sync不使用の場合)のexample Mozilla 0.96のexample iCabのexample
Explorer
(Color Sync使用の場合)
Explorer
(Color Sync不使用の場合)
Mozilla 0.96 iCab
Home > Web Design > ブラウザでの色の表示の違い