Chrome の色補正

プログラム話…というかブラウザ話です。

滅びの国の王女では、王女の色を選択できる、というギミックがありました。
テクスチャーをパレット対応の形式で作成して、リアルタイムでパレットを適用するといったことをやっていたのですが、わざわざパレットデータを作るまでもないようなモノに関しては、普通のテキスト形式の設定ファイルで色指定を行っていました。

ところが、設定ファイルでは色の指定を16進数のカラーコードで行っていたため、どんな色を指定しているのかイマイチわからない、という問題がありました。

単に１つのカラーコードが欲しいだけなら 適当なツールや
https://www.rapidtables.com/web/color/html-color-codes.html
なんかを使って16進数を持ってくれば良いのですが、色の組み合わせを指定したい時は設定中の複数の色が全部見えていた方が分かりやすいんですよね。

そこで思いついたのが Web ブラウザの活用です。

設定ファイルをうまいこと html 形式で記述できるようにしておけば、web ブラウザで設定ファイルをそのまま開いて色を確認できます。
というわけで、table タグを使って色の設定項目を埋め込めるようにしてみました。

具体的にいうと、これまでテキストファイルで

PlayerColor.Red   = 0xff0000
PlayerColor.Green = 0x00ff00
PlayerColor.Blue  = 0x0000ff

のようにしていたものを、

<table><caption>PlayerColor</caption>
<tr><td>Red  </td><td bgcolor="#0xff0000">dummy text</td></tr>
<tr><td>Green</td><td bgcolor="#0x00ff00">dummy text</td></tr>
<tr><td>Blue </td><td bgcolor="#0x0000ff">dummy text</td></tr>
</table>

と記述できるようにした、というものです。かえって面倒になったようにも見えますが、テンプレートを作っておけば実際はコピペするだけで済みます。

このファイルをゲーム側で読み込んで解析して、色の設定情報を取り出します。

んで、さっそく今までテキストで書いていた色テーブルを html 形式に変換して試してみたのですが……なんか、「？？」て感じになりまして。

#0000FF と指定して表示した色が、いやに彩度が低いというかグレーがかって見えるんですよね。

「あれ？ #0000FF ってもっとキツイ青じゃなかったっけ？」と。

最初、HTMLでのRGB指定というのは普通のRGB指定と異なっていて、目に優しいRGB空間になっているのかと思ったのですが、そういうわけではなさそうですし。
というわけで少し調べてみて初めて知ったのですが……。

Google Chrome って自動的に色を補正してくれるんですね！

確かに、同じファイルを Firefox で開いてみるとちゃんとキツイ青で表示されています。
比較画像を作ってみました。

左上： Gimp で R=0%, G=0%, B=100% で作った色
左下： Firefox で表示した #0000FF の色
右側： Chrome で表示した #0000FF の色

この現象、私は全く知りませんでした。
「Chrome 色が違う」とかで検索するといっぱい出てきますね、コレ。
どちらかといえば Chrome が正しくて他が間違っている（Windows上でのガンマ補正が関係しているみたいですね）ようなのですが、このあたりは私も勉強不足ですので詳細はあまり分かりません。
そーいやPhotoShopでガンマがどうとかあったような……。

とりあえず、今回の目的から言うと余計なおせっかいであることは確かなので、この補正機能を切ってしまう事にしました。

sRBG とガンマ補正に関してはこちらをどうぞ

ガンマ補正のうんちく
https://qiita.com/yoya/items/122b93970c190068c752

sRGBとAdobe RGBを理解する
https://www.itmedia.co.jp/dc/articles/1009/01/news030.html

しかしまさかこんなところで罠にハマるとは… orz