關於 gamma 2.2 和 LinearRGB

有在拍照和修圖的人一定用過 gamma 設定，可以讓暗部變亮，亮部又不會過曝， 根據 [wiki 說明](https://zh.wikipedia.org/wiki/%E4%BC%BD%E7%91%AA%E6%A0%A1%E6%AD%A3) <div style="background-color:#eee;padding:10px"> 為圖像進行伽馬編碼的目的是用來對人類視覺的特性進行補償，從而根據人類對光線或者黑白的感知，最大化地利用表示黑白的數據位或帶寬 </div> 有沒有覺得和 LinearRGB 很像呢 ? gamma 的計算公式如下 ``` out=pow(in,gamma) ``` 把 0~255 的顏色對應畫出來，如下圖： 藍色的 gamma 1/2.2 幾乎和 LinearRGB 完全一樣 <svg width=300 height=300 style="background-color:#ffa"> <g transform="translate(10,0)"> <path id="a121611_p1" d="M0,0" stroke="#f00" fill="none"/> <path id="a121611_p2" d="M0,0" stroke="#00f" fill="none"/> <path id="a121611_p3" d="M0,0" stroke="#0a06" fill="none" stroke-width="8"/> <path d="M20,10 L20,270 L275,270" stroke="#000" fill="none"/> <text x=8 y=290>0</text> <text x=6 y=20>1</text> <text x=270 y=290>1</text> </g> <g transform="translate(166,200)"> <text x=25 y=20>gamma 1/2.2</text> <text x=25 y=40>gamma 2.2</text> <text x=25 y=60>LinearRGB</text> <rect x=5 y=8 width=14 height=14 fill="#00f"/> <rect x=5 y=28 width=14 height=14 fill="#f00"/> <rect x=5 y=48 width=14 height=14 fill="#0a06"/> </g> </svg> <script> $(()=> { function getgamma(n) { let x,y,hh=""; hh="M20,260 "; for (x=0;x<256;x++) { y=Math.pow((x/255),n)*255; hh+="L"+(x+20)+","+(270-y)+" "; } return hh; } function getlrgb() { let x,y,k,hh=""; hh="M20,260 "; for (x=0;x<256;x++) { k=x/255; if (k<=0.0031308) y=12.92*k; else y=1.055*Math.pow(k,0.41666)-0.055; y*=255; hh+="L"+(x+20)+","+(270-y)+" "; } return hh; } $("#a121611_p1").attr("d",getgamma(2.2)); $("#a121611_p2").attr("d",getgamma(1/2.2)); $("#a121611_p3").attr("d",getlrgb()); }) </script>