RGB、HSL、Hex網頁色彩碼，看完這篇全懂了

網頁使用到的色彩標示方法中，從古早時期你們都在用的16進位碼（#000000）、RGB色值標示、HSL色彩標示，其中網頁設計師最常使用的16進位色碼標示法，而16進位碼又是如何計算色彩的呢？有沒有辦法直接腦殼就把色彩算出來？HSL色彩該如何運用與記憶？有沒有什麼祕訣或小技巧？一連串的問題就跟着繼續看下去吧。

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度，正常所見的語法就像是這樣

HSL( 240, 100%, 50% )

色相（Hue）

色相的0度爲R（紅）色，120度爲G（綠）色，240度爲B（藍）色，爲了記憶方便，先讓我把角度0度設定爲正上方（與CSS3漸層相同）你們記憶比較方便點，因此以順時針方向旋轉，他們之間的角度就如同下圖所示

亮度/明度（Lightness）

若是咱們把上面這張HSL色彩的H（Hue）平面圖形的亮度（Lightness）轉換成一個立體的圓柱體時，你就能看到以下圖所示

由中間開始，越是上方的就越是增亮（白色分量增長），增亮到最後就變成純白，而越是往下方則越是縮減亮度（黑色分量增長），亮度縮減到最後就變成了黑色，因此通常來講，HSL色彩中的L預設值會是50%，若要變暗一點就把數值往0%調整，若要變亮變白一點就把數值往100%調整

飽和度（Saturation）

如同亮度（Lightness）同樣，飽和度（Saturation）也是採用百分比方式呈現，以下圖所示

以色彩預設都是100%飽和的狀況下，如果要讓色彩變得不那麼鮮豔，就把色彩飽和度（Saturation）往0%的方向調整便可，色彩飽和度（Saturation）不一樣於色彩亮度（Lightness）的地方在於，色彩飽和度（Saturation）下降以後，色彩越是不鮮豔就越接近灰色而不是變黑，這一點千萬要可以區分。

因此，瞭解以上HSL三個數值的差別以後，假若咱們今天要一個黃色，那咱們就可先設定HSL（60，100%，50%），色相60度爲黃色，預設100%飽和（鮮豔），預設正常亮度50%，若是咱們須要一個鵝黃色的話，那咱們就只須要把黃色多加一點白色，因此只要修改L的數值便可，像是這樣HSL（45，100%，80%），若是咱們但願色彩接近橙色的話，那咱們就修改色相（Hue）角度往R方向調整便可，像是這樣HSL（40，100%，80%），這樣是否是變得簡單許多呢。

16進位色彩（hex color）

16進位碼簡寫爲Hex，在HTML&CSS中16進位碼的色彩標示是由一個井號（＃）開始，接着後面帶6個數字來表示，此色彩標示方式對許多設計師來講太長用到但卻又有點摸不着頭緒，光是要選個紅色或粉紅色就不知道該怎麼寫了，仍是得依靠Dreamweaver的色盤才能寫出來，其實16進位色碼沒有那麼困難，咱們只要瞭解三個問題就學會了，下面來簡單的說明一下。

10進制原理

第一個問題就是16進位是啥？通常咱們常見的進位方式是10進位，也就是說一個「數」只要超過第十位數以後就進位，若是仍是沒法理解的話，讓咱們看下面這張圖的解釋。

16進制原理

由上圖能夠看到一段數字的第十一位數就進位了，這也是咱們最經常使用到的計算方式，而16進位的概念也是相同的，只是16進位中的第11位數字開始因爲沒辦法寫成「11」（2位數就是進位了，因此不能這樣寫啊），因此在第11位數開始採用abcdef這些英文字母來看成數字使用，因此完整的16進位大概就像下圖所示，第16位數的表明字母是「f」，超過第16位數以後就進位了。

16進制色彩表示方式

第二個問題則是這16進位碼的色彩標示怎麼標示的？基本上HTML & CSS中的16進位碼色彩標示共分紅三組數字，每兩碼就表示一個色彩，以下圖所示

從圖片中可見到16進位碼中6碼數字的前兩碼錶明的是RGB色彩中的R色，而中間的兩碼數字表明的是G色，後兩碼則是B色，若是咱們把16進位碼看成是發光的強度來看，#000000就表示RGB三個顏色都沒有發光，那麼沒有發光就你看到的就是黑色囉，又若是咱們但願呈現紅色的話，咱們就把R色光開到最大，像這樣#FF0000就會看到紅色的色彩了。再來作個練習，若是咱們想要黃色，那就是把紅色光跟綠色光混合起來，因此咱們就把紅色光跟綠色光像這樣開到最大#FFFF00，你就可以看到黃色了。

16進制調整亮度技巧

以上這樣的作法最多隻用到兩個顏色，且用到的是原色居多或許尚未太大問題，如今咱們進一步的來玩一下16進位色彩，咱們能夠知道色光是屬加法混色，是越加越亮的，因此咱們若是想要一個鵝黃色，咱們能夠先把黃色加出來以後再混進一點藍色，看成是HSL色彩中的亮度調整用，當藍色光線加進來以後就變亮了，而你也會看到鵝黃色出現了，因此咱們的原始碼大概會長這樣#ffffcc。

還不是很懂嗎？簡單的說，在使用16進位碼設定色彩的時候，第一步你須要先將原色設定出來，接着再利用第三色來調整亮度，這樣就搞定了！那如果咱們想要調暗的話，那就是把本來的兩個色彩數值下降（也就是光線強度開若一點的概念），這樣就你就能夠把顏色設定出來！其實沒有那麼困難的，日常寫個三四次應該就能上手了～但願你們都能變成16進位碼設定高手。