[筆記] HSL轉RGB

因為想學習CSS3 更直覺的 HSL色彩應用
便想要知道HSL和RGB的關係



用php印出色彩表格
再用色胚子(取色軟體)去取RGB色彩值

色相H和飽和度S的關係表，明度L固定為50%

色相H固定為240(藍色)，明度L和飽和度S的關係表

從圖1中可得知
H變化是有六種階段(會有六種公式)
0~60是R=255，變化的是G的增加
60~120則是R的下降，G的不變
剩下略(或參見英文維基百科HSL的部分)

圖1還知道飽和度S=0%和明度L=50%時不論H大小
RGB都是=127
S未達0%時都會趨近 127

在圖2更顯而易見
最左邊S=0時H都可直接忽略
只要知道明度L多少
就能知道飽和度S非100%時會趨近於多少
ex. L=50% 會趨近於127
而127怎麼來?
就是RGB最大值255*50%(略有誤差值@@")
而當L=0% 理所當然趨近 0 (=255*0%)


回到原本的基準點是以飽和度S=100%，L=50%當起點 (圖二中RGB(0,255,0))
找出H和L的變化
有兩種公式小於50%和大於等於50%
而它是線性變化

小於50%是趨近於0 

$RGB=$RGB-((50-$l)/50)*$RGB;

大於等於50%是趨近於255 

$RGB=$RGB+(255-$RGB)*(($l-50)/50); 


處理完H和L
加上先前發現L會影響S趨近的值
看圖列最左和最右
單看單一明度L即可

趨近的公式就出來了

$RGB = $RGB-($RGB-(255*($l/100)))*(1-$s/100);

最後寫PHP來進行轉換
實作
 http://web.csie.npic.edu.tw/~s101418011/color/index.php

原始碼(在HTML)