免費(fèi)企業(yè)網(wǎng)站建設(shè)當(dāng)中的RGB、HSL、Hex網(wǎng)頁(yè)色彩你了解多少？

       網(wǎng)頁(yè)使用到的色彩標(biāo)示方法里面，從古早時(shí)期大家都在用的16進(jìn)位碼(#000000)、RGB色值標(biāo)示以及HSL色彩標(biāo)示，其中網(wǎng)頁(yè)設(shè)計(jì)師最常使用的16進(jìn)位色碼標(biāo)示法，設(shè)計(jì)師究竟了解多少呢？而16進(jìn)位碼又是怎么計(jì)算色彩的？有沒(méi)有辦法直接腦袋就把色彩算出來(lái)？HSL色彩該如何運(yùn)用與記憶？有沒(méi)有什么秘訣或小技巧？一連串的問(wèn)題今天高至就在這里給大家介紹免費(fèi)企業(yè)網(wǎng)站建設(shè)當(dāng)中的RGB、HSL、Hex網(wǎng)頁(yè)色彩你了解多少？

      RGB色彩在網(wǎng)頁(yè)設(shè)計(jì)時(shí)的標(biāo)記方式是RGB(0~255 , 0~255, 0~255)，其中括弧內(nèi)以逗號(hào)分隔的三組數(shù)值恰好就是(R, G, B) 的色彩數(shù)值，所以數(shù)值會(huì)是0~255 共256個(gè)數(shù)值的這個(gè)區(qū)間，而RGB色彩大家應(yīng)該都知道的混色原理就是加法混色，各位就直接用燈光來(lái)想吧，我們把0~255的數(shù)值當(dāng)作是開燈的亮度來(lái)看，0就是沒(méi)開燈，255就是開到最亮，所以當(dāng)我把紅色光線開到最亮而其它兩個(gè)色光都不開時(shí)就是RGB(255, 0, 0)這樣，想當(dāng)然的只有開紅色光而沒(méi)有開其他色光的話，你看到的就是紅色啰，那么如果我把紅色光只開一半，像是這樣RGB(127, 0, 0)，那么就會(huì)變成暗紅色，因?yàn)闆](méi)有開到最亮，這樣應(yīng)該很容易理解了吧。

      同樣的道理，當(dāng)我們單獨(dú)開啟其它色光的時(shí)候，就只會(huì)看到該光線的色彩，如綠色就是RGB(0,255,0)，藍(lán)色就是RGB(0,0,255)，如果想要黃色就是混合R與G，像是這樣RGB(255,255,0)，看起來(lái)有點(diǎn)辛苦，我們就用圖片來(lái)記憶吧，RGB色彩以R在上方順時(shí)針排列，而中間產(chǎn)出的混合色采則是我們印表機(jī)的C、M、Y(藍(lán)、洋紅、黃)三色，CMY三色則是以C于下方同樣呈現(xiàn)順時(shí)針?lè)较蚺帕校桶堰@張圖記在腦海中，簡(jiǎn)單的說(shuō)個(gè)口訣并記住「R在上順時(shí)針、C在下順時(shí)針」，很容易的你就能夠把這畫面中的色彩順序記住了，以后腦袋混色再也沒(méi)有那么困難了。

      其實(shí)國(guó)外有不少設(shè)計(jì)師喜歡HSL(Hue, Saturation, Lightness)色彩寫法，HSL色彩的寫法是HSL(色相角度但不加單位0~360, 色彩飽和度0~100%, 色彩亮度0~100 %)，而在括號(hào)內(nèi)的色相采用的是0~360度，正常所見的語(yǔ)法就像是這樣

      HSL( 240, 100%, 50% )

      色相的0度為R(紅)色，120度為G（綠）色，240度為B（藍(lán)）色，為了記憶方便，先讓我把角度0度設(shè)定為正上方(與CSS3漸層相同)大家記憶比較方便點(diǎn)，所以以順時(shí)針?lè)较蛐D(zhuǎn)，他們之間的角度就如同下圖所示

       如果我們把上面這張HSL 色彩的H(Hue) 平面圖形的亮度（Lightness）轉(zhuǎn)換成一個(gè)立體的圓柱體時(shí)，你就能看到如下圖所示

 

       HSL color Lightness

       由中間開始，越是上方的就越是增亮(白色份量增加)，增亮到最后就變成純白，而越是往下方則越是縮減亮度(黑色份量增加)，亮度縮減到最后就變成了黑色，所以一般來(lái)說(shuō)，HSL色彩中的L預(yù)設(shè)值會(huì)是50%，若要變暗一點(diǎn)就把數(shù)值往0％調(diào)整，若要變亮變白一點(diǎn)就把數(shù)值往100%調(diào)整

       如同亮度（Lightness）一樣，飽和度（Saturation）也是采用百分比方式呈現(xiàn)，如下圖所示

       HSL color Saturation

       以色彩預(yù)設(shè)都是100%飽和的情況下，若是要讓色彩變得不那么鮮艷，就把色彩飽和度（Saturation）往0%的方向調(diào)整即可，色彩飽和度（Saturation）不同于色彩亮度（Lightness）的地方在于，色彩飽和度（Saturation）降低之后，色彩越是不鮮艷就越接近灰色而不是變黑，這一點(diǎn)千萬(wàn)要能夠區(qū)分。

       所以，了解以上HSL三個(gè)數(shù)值的差異之后，倘若我們今天要一個(gè)黃色，那我們就可先設(shè)定HSL(60, 100%, 50%)，色相60度為黃色，預(yù)設(shè)100%飽和(鮮艷) ，預(yù)設(shè)正常亮度50%，如果我們需要一個(gè)鵝黃色的話，那我們就只需要把黃色多加一點(diǎn)白色，所以只要修改L的數(shù)值即可，像是這樣HSL(45, 100%, 80%)，如果我們希望色彩接近橙色的話，那我們就修改色相(Hue)角度往R方向調(diào)整即可，像是這樣HSL(40, 100%, 80%)，這樣是不是變得簡(jiǎn)單許多呢^^

       如果各位想知道更多關(guān)于HSL的色彩模型說(shuō)明，也可以看看維基的解說(shuō)，會(huì)有更多概念在里面喔。

       16進(jìn)位碼簡(jiǎn)寫為Hex，在HTML&CSS里面16進(jìn)位碼的色彩標(biāo)示是由一個(gè)井號(hào)（＃）開始，接著后面帶6個(gè)數(shù)字來(lái)表示，此色彩標(biāo)示方式對(duì)許多設(shè)計(jì)師來(lái)說(shuō)太長(zhǎng)用到但卻又有點(diǎn)摸不著頭緒，光是要選個(gè)紅色或粉紅色就不知道該怎么寫了，還是得依靠Dreamweaver的色盤才能寫出來(lái)，其實(shí)16進(jìn)位色碼沒(méi)有那么困難，我們只要了解三個(gè)問(wèn)題就學(xué)會(huì)了，就讓Amos來(lái)簡(jiǎn)單的說(shuō)明一下。

       10進(jìn)位原理

       第一個(gè)問(wèn)題就是16進(jìn)位是啥？一般我們常見的進(jìn)位方式是10進(jìn)位，也就是說(shuō)一個(gè)「數(shù)」(念ㄕㄨˋ)只要超過(guò)第十位數(shù)之后就進(jìn)位，如果還是無(wú)法理解的話，讓我們看下面這張圖的解釋。

       16進(jìn)位原理

       由上圖可以看到一段數(shù)字的第十一位數(shù)就進(jìn)位了，這也是我們最常用到的計(jì)算方式，而16進(jìn)位的概念也是相同的，只是16進(jìn)位中的第11位數(shù)字開始由于沒(méi)辦法寫成「11」(2位數(shù)就是進(jìn)位了，所以不能這樣寫啊)，所以在第11位數(shù)開始采用abcdef這些英文字母來(lái)當(dāng)作數(shù)字使用，所以完整的16進(jìn)位大概就像下圖所示，第16位數(shù)的代表字母是「f」，超過(guò)第16位數(shù)之后就進(jìn)位了。

      16進(jìn)位色彩表示方式

       第二個(gè)問(wèn)題則是這16進(jìn)位碼的色彩標(biāo)示怎么標(biāo)示的？基本上HTML & CSS中的16進(jìn)位碼色彩標(biāo)示共分成三組數(shù)字，每?jī)纱a就表示一個(gè)色彩，如下圖所示

       從圖片中可見到16進(jìn)位碼中6碼數(shù)字的前兩碼代表的是RGB色彩中的R色，而中間的兩碼數(shù)字代表的是G色，后兩碼則是B色，如果我們把16進(jìn)位碼當(dāng)作是發(fā)光的強(qiáng)度來(lái)看，#000000就表示RGB三個(gè)顏色都沒(méi)有發(fā)光，那么沒(méi)有發(fā)光就你看到的就是黑色啰，又如果我們希望呈現(xiàn)紅色的話，我們就把R色光開到最大，像這樣#FF0000就會(huì)看到紅色的色彩了。再來(lái)做個(gè)練習(xí)，如果我們想要黃色，那就是把紅色光跟綠色光混合起來(lái)，所以我們就把紅色光跟綠色光像這樣開到最大#FFFF00，你就能夠看到黃色啰。

      16進(jìn)位調(diào)整亮度技巧

      以上這樣的做法最多只用到兩個(gè)顏色，且用到的是原色居多或許還沒(méi)有太大問(wèn)題，現(xiàn)在我們進(jìn)一步的來(lái)玩一下16進(jìn)位色彩，我們可以知道色光是屬加法混色，是越加越亮的，所以我們?nèi)绻胍粋€(gè)鵝黃色，我們可以先把黃色加出來(lái)之后再混進(jìn)一點(diǎn)藍(lán)色，當(dāng)作是HSL色彩中的亮度調(diào)整用，當(dāng)藍(lán)色光線加進(jìn)來(lái)之后就變亮了，而你也會(huì)看到鵝黃色出現(xiàn)了，所以我們的原始碼大概會(huì)長(zhǎng)這樣#ffffcc。

       還不是很懂嗎？高至簡(jiǎn)單的說(shuō)，在使用16進(jìn)位碼設(shè)定色彩的時(shí)候，第一步你需要先把原色設(shè)定出來(lái)，接著再利用第三色來(lái)調(diào)整亮度，這樣就搞定了！那若是我們想要調(diào)暗的話，那就是把原本的兩個(gè)色彩數(shù)值降低(也就是光線強(qiáng)度開若一點(diǎn)的概念)，這樣就你就可以把顏色設(shè)定出來(lái)啰！其實(shí)沒(méi)有那么困難的，平常寫個(gè)三四次應(yīng)該就能上手了～希望大家都能變成16進(jìn)位碼設(shè)定高手啰(喂！講那么多！我用HSL不是更快嗎？XDDD)

       如果大家對(duì)16進(jìn)位有更多興趣的話，也可以看看維基百科里面在不同語(yǔ)言中的16進(jìn)位表示法有何不同。關(guān)于免費(fèi)企業(yè)網(wǎng)站建設(shè)當(dāng)中的RGB、HSL、Hex網(wǎng)頁(yè)色彩你了解多少？就介紹到這里了，通過(guò)上面的詳細(xì)介紹，相信可以幫得到有疑問(wèn)的你。