デザイン

ブラウザによって色が異なる「色空間」の不思議な世界


ブラウン管や液晶ディスプレイ、スマートフォン、デジタルカメラでは、赤・緑・青の3種の三原色を組み合わせることで幅広い色を再現するRGBカラーモデルが採用されており、ウェブページや画像の色合いはRGBで「同じ色」になるように指定されています。しかし、ムービーの場合はそもそも同じRGBが出力されないという問題が存在するという点について、ビデオパフォーマンスモニタリングツールを販売するMUXが解説しています。

Your browser and my browser see different colors | Mux blog
https://mux.com/blog/your-browser-and-my-browser-see-different-colors/

色の見え方には観測者同士による差異が存在するため、デジタルの世界では色を定量化するために、赤(R)・緑(G)・青(B)をそれぞれ0から255の値で表す「色空間」という手法が採用されています。PCにおいてはsRGBAdobe RGBが色空間として一般的ですが、動画においてはSDコンテンツはBT.601、HDコンテンツはBT.709という色空間が一般的とのこと。

MUXが指摘する問題は、「BT.601とBT.709では、ブラウザによって異なる色が表示されることがある」というもの。動画を記録・変換・再生するためのフリーソフトウェアの中でも特に広く使われているFFmpegで以下のコマンドを入力して、テストムービーを作成します。色空間としてはデジタル放送で採用されるYUV 420を使用。色は指定しないため、デフォルトの「yuv(0,0,0)」のムービーが生成されます。

ffmpeg -f rawvideo -s 320x240 -pix_fmt yuv420p -t 1 -i /dev/zero -an -vcodec libx264 -profile:v baseline -crf 18 -preset:v placebo -color_range pc -y 601.mp4

生成されたムービーをMacのSafariでレンダリングすると、以下のようになります。この色をRGB形式で表すと、「rgb(0,135,0)」となります。


ここでは、「ムービーの色空間YUV420をブラウザの色空間sRGBに変換する」という処理をSafari自らが行っています。しかし、ムービーのデータには「色空間はYUV420である」という情報は記載されていないため、Safariは経験的な推測によって色空間の処理を行っているとのこと。こうしたSafariの推測に任せたくない場合は、「-color_trc」「-colorspace」「-color_primaries」などのコマンドで色空間に関する情報をメタデータに記入します。上記のコマンドを追加したムービーをSafariでレンダリングした表示が以下。Safariの推測に任せた表示と同一のものが生成されました。


続いては先ほどのコマンドに、「-vf "colorspace=all=BT.709"」を追加してBT.709形式の色空間に変換します。

ffmpeg -i 601vui.mp4 -an -vcodec libx264 -profile:v baseline -crf 18 -preset:v placebo -vf "colorspace=range=pc:all=bt709" -y 709.mp4

これをSafariでレンダリングしたものが以下。「rgb(8,157,0)」という、先ほどに比べてやや明るい緑色が表示されました。


こちらも「-color_trc」「-colorspace」「-color_primaries」を使って、色空間に関する情報をメタデータに記入してみます。これをSafariでレンダリングすると以下のようになり、BT.601とはほんの少しだけ異なる「rgb(0,132,0)」という色合いが表示されました。


以上の結果から、MUXは「ムービーをレンダリングする際、Safariは色空間がBT.601だと想定する」と推測しています。ただし、BT.701はHDコンテンツの標準形式なので、実際にHDに相当する解像度の1920×1080でテストムービーを生成して表示してみます。以下の画像では、SDコンテンツの結果が上段、HDコンテンツの結果が下段となっていますが、これら2つに差異はありません。


同様の実験をMacのChromeで行うと、ハードウェアアクセラレーションがオンの状態ではSafariとほぼ同一の結果が得られます。


しかし、ハードウェアアクセラレーションをオフにすると、色空間の情報をメタデータに記入した上でも、BT.601とBT.701は異なる色として表示されます。


輪をかけてひどいのがMacのFirefoxで、メタデータに色空間の情報が存在しないBT.601では、明らかに濃い緑色が表示されました。


今度はMacではなくWindowsを使って、同様の色実験を続けます。WindowsでのEdgeが以下。メタデータを無視し、さらに色空間がBT.601という想定でレンダリングを行っているように見えます。


WindowsでのChrome(ハードウェアアクセラレーションがオン)では、以下のような奇妙な結果に。BT.601とBT.701の色空間や、メタデータの有無、解像度によってバラバラな色が表示されます。この結果について、Muxは「OSかビデオカードドライバのレベルで何かが起きているのでは」と一言。


一方、FirefoxはWindowsとMacで差はなく、メタデータに色空間の情報が存在しないBT.601では明らかに濃い緑色が表示されるという結果でした。


一連の結果から、MuxはFFmpegを使用する場合はメタデータにしっかり色空間の情報を記入すべきと指摘。各ブラウザの開発者に対しては、各ブラウザのプロジェクトリーダー間で色空間に関する会合がもたれるべきだと主張しています。

この記事のタイトルとURLをコピーする

・関連記事
色空間を表す「RGB(赤・緑・青)」と「HSL(色相・彩度・輝度)」の値の関係が視覚的に分かる「RGB & HSL」 - GIGAZINE

デザインで「人間が感覚的に見分けやすい色」を選ぶ方法をデータ可視化のプロが解説 - GIGAZINE

アクセシビリティの高いデザインを実現するのに重要な「色選び」の方法とは? - GIGAZINE

画像のノイズを落としたり容量を小さくしたりするにはどのようなコードを書く必要があるのか? - GIGAZINE

in ソフトウェア,   デザイン, Posted by log1k_iy

You can read the machine translated English article here.