went5-blog

ガンマ空間とリニア色空間とは

ディスプレイに色をそのまま表示すると、色が黒く沈んでしまうため、
黒く沈まないように補正する必要があります。
この補正を ガンマ補正 といい、補正後の色空間をガンマ色空間といいます。
反対に、ガンマ補正がされていない色空間のことをリニア色空間といいます。

ガンマ色空間に似た色空間として、sRGB色空間というものがあります。
この記事では解説しませんが、参考となるサイトを載せておきます。
https://knowledge.shade3d.jp/knowledgebase/%E3%82%AC%E3%83%B3%E3%83%9E2-2%E3%81%A8srgb%E3%81%AE%E9%81%95%E3%81%84

ガンマ補正を計算式で表すと以下のように定義されます。

y = x^\frac{1}{\gamma} (0\leq x \leq1)

パラメータ	説明
$x$	入力カラー値
$y$	出力カラー値

$γ$ はディスプレイによって様々な値が用いられていますが、一般的に2.2が用いられています。
プログラムでは以下のように実装できます(RGBのうちRのみ)

// rの範囲は0~1の場合
r = Math.pow(r,1/2.2);

// rの範囲が0~255の場合
r = Math.pow(r/255,1/2.2)*255;

これをグラフ化すると以下のようになります。
yの値が高くなるため補正をかけると明るくなります。

ガンマ色空間からリニア色空間に変換する補正を逆ガンマ補正といいます。
逆ガンマ補正を計算式で表すと以下のように定義されます。

y = x^\gamma

プログラムでは以下のように実装できます(RGBのうちRのみ)

// rの範囲は0~1の場合
r = Math.pow(r,1/1/2.2);

// rの範囲が0~255の場合
r = Math.pow(r/255,1/1/2.2)*255;

プログラムを使い、ガンマ色空間とリニア色空間の数値の違いを可視化してみました。

ガンマ色空間

Linear

リニア色空間

Gamma

リニア色空間のほうが全体的に暗くなっていることがわかります。

plotly,jsを使って、ガンマ色空間とリニア色空間の数値の違いを可視化しました。
2.2がガンマ色空間で、1.0がリニア色空間になります。

グラフでもリニア色空間のほうが全体的に暗くなることが分かります。