RGB、HSL、Hex 網頁色彩碼,看完這篇全懂了 | hex color中文
網頁使用到的色彩標示方法中,從古早時期大家都在用的16進位碼(#000000)、RGB色值標示、HSL色彩標示,其中網頁設計師最常使用的16進位色碼標示法,設計師究竟了解多少?而16進位碼又是如何計算色彩的呢?有沒有辦法直接腦袋就把色彩算出來?HSL色彩該如何運用與記憶?有沒有什麼秘訣或小技巧?一連串的問題就跟著Amos繼續看下去。先來說說RGB色彩(RGBcolor)RGB色彩在網頁設計時的標記方式是RGB(0~255,0~255,0~255),其中括弧內以逗號分隔的三組數值恰好就是(R,G,B)的色彩數值,所以數值會是0~255共256個數值的這個區間,而RGB色彩大家...
網頁使用到的色彩標示方法中,從古早時期大家都在用的16進位碼(#000000)、RGB色值標示、HSL色彩標示,其中網頁設計師最常使用的16進位色碼標示法,設計師究竟了解多少?而16進位碼又是如何計算色彩的呢?有沒有辦法直接腦袋就把色彩算出來?HSL色彩該如何運用與記憶?有沒有什麼秘訣或小技巧?一連串的問題就跟著Amos繼續看下去。
先來說說RGB色彩 ( RGB color )RGB色彩在網頁設計時的標記方式是 RGB(0~255 , 0~255, 0~255),其中括弧內以逗號分隔的三組數值恰好就是 (R, G, B) 的色彩數值,所以數值會是 0~255 共256個數值的這個區間,而 RGB色彩大家應該都知道的混色原理就是加法混色,各位就直接用燈光來想吧,我們把0~255的數值當作是開燈的亮度來看,0就是沒開燈,255就是開到最亮,所以當我把紅色光線開到最亮而其它兩個色光都不開時就是 RGB(255, 0, 0)這樣,想當然的只有開紅色光而沒有開其他色光的話,你看到的就是紅色囉,那麼如果我把紅色光只開一半,像是這樣 RGB(127, 0, 0),那麼就會變成暗紅色,因為沒有開到最亮,這樣應該很容易理解了吧。
同樣的道理,當我們單獨開啟其它色光時,就只會看到該光線的色彩,如綠色就是 RGB(0,255,0),藍色就是 RGB(0,0,255),如果想要黃色就是混合R與G,像是這樣 RGB(255,255,0),看起來有點辛苦,我們就用圖片來記憶吧,RGB色彩以R在上方順時針排列,而中間產出的混合色採則是我們印表機的C、M、Y(藍、洋紅、黃)三色,CMY三色則是以C於下方同樣呈現順時針方向排列,就把這張圖記在腦海中,簡單的說個口訣並記住「R在上順時針、C在下順時針」,很容易的你就能夠把這畫面中的色彩順序記住了,以後腦袋混色再也沒有那麼困難了。
再來談談HSL色彩 ( HSL color )
其實國外有不少設計師喜歡HSL(Hue, Saturation, Lightness)色彩寫法,HSL色彩的寫法是 HSL(色相角度但不加單位0~360, 色彩飽和度0~100%, 色彩亮度0~100%),而在括號內的色相採用的是0~360度,正常所見的語法就...