關於 LinearRGB 和 sRGB

<style> .a121601_div { display:inline-block; width:4ch; height:4ch; border:1px solid #000; } </style> 在測試 SVG 的顏色時遇到一些奇怪的問題，和預期的結果很不一樣，查了查資料才曉得，原來遇到了 LinearRGB 和 sRGB 的問題，一直以來只知道程式在用的都是 sRGB 但是對於這些色彩定義其實沒有很深的概念 關於 linearRGB 和 sRGB 的設定方式，預設就是 linearRGB ，所以只要在使用到sRGB的濾鏡加上 ``` color-interpolation-filters="sRGB" ``` 範例如下 ``` <svg color-interpolation-filters="sRGB"> <feDisplacementMap color-interpolation-filters="sRGB"> ``` 參考資料：[這裡](https://home.gamer.com.tw/creationDetail.php?sn=3777257) 肉眼看顏色，其實不是線性的，rgb(255,255,255) 是最亮，中間值 rgb(128,128,128) 肉眼看起來的亮度其實偏暗, LinearRGB 其實就是以真實亮度來調整 rgb 的值 轉換公式如下 : sRGB 轉換為 LinearRGB ``` Cs<=0.04045 → Cl = Cs/12.92 Cs>0.04045 → Cl = pow((Cs+0.055)/1.055, 2.4) ``` LinearRGB 轉換為 sRGB ``` Cl<=0.0031308 → Cs = 12.92 * Cl Cl>0.0031308 → Cs = 1.055 * pow(Cl,0.41666) - 0.055 ``` 當亮度為一半亮度(0.5)時，Cs=0.735360635285651 , RGB 的值取整數等於 188 , 也就是 rgb(188,188,188) 其實才是一半亮度 sRGB <div class="a121601_div" style="background-color:#000"></div> <div class="a121601_div" style="background-color:rgb(128,128,128)"></div> <div class="a121601_div" style="background-color:#fff"></div> LinearRGB <div class="a121601_div" style="background-color:#000"></div> <div class="a121601_div" style="background-color:rgb(188,188,188)"></div> <div class="a121601_div" style="background-color:#fff"></div> 有沒有覺得 LinearRGB 的中間亮度比較真實呢 ?