大連仟億科技友情提供：http://www.billionnet.net

 

網(wǎng)頁(yè)制作中配色技巧

對于網(wǎng)頁(yè)設計師來(lái)說(shuō)，RGB、CMYK什么的就像左右手一樣熟悉。但如果僅用心算的方法，不借助于Photoshop拾色器或任何類(lèi)似的工具，你可不可以快速說(shuō)出“海棠紅”所對應的RGB色值？如果再加一點(diǎn)橙色進(jìn)去，把亮度提高一點(diǎn)，色值又是多少？
很難回答，是吧……面對這些坑爹的問(wèn)題，設計師/前端工程師們通常只能打開(kāi)Photoshop，輸入當前顏色對應的色值，在色板上調出新的顏色，再把色值復制下來(lái)，替換當前的色彩。
人生很短暫，這樣白白浪費掉大塊的時(shí)間，你甘心嗎？
那么，讓我們來(lái)探索一下有沒(méi)有更好的技巧。

讓人又愛(ài)又恨的RGB
RGB是基于色光混合的原理設計的，是一種以硬件為導向的色彩模型，它描述了顯示器的電子槍打在Red紅、Green綠、Blue藍三色發(fā)光極上的顯色 方式。當紅綠藍三色光的亮度均為最大值(255)的時(shí)候，屏幕上重現的顏色就是最亮的白色，都為0的時(shí)候，結果就是黑色。
如果想要得出剛才提到的“海棠紅”，我們就要把紅光調到最亮，把綠光的亮度調到1/5左右，再把藍光的亮度調到1/3左右，如下圖：

同樣，要得到剛才說(shuō)的“加點(diǎn)橙色進(jìn)去， 再亮那么一點(diǎn)點(diǎn)”的顏色，我們要把綠光調亮1倍多，再把藍光調暗少許，如下圖：

雖然得到了需要的色彩，但我們所做的事情與“橙色”或“增加亮度”實(shí)在扯不上關(guān)系。這種調色方法，完全不符合我們對顏色的直觀(guān)感受。連這種事都可以忍受嗎？不要再假裝視覺(jué)設計師了，舞臺燈光師才是你的真實(shí)身份！

HSL色彩模型又是什么？
HSL同樣使用了3個(gè)分量來(lái)描述色彩，與RGB使用的三色光不同，HSL色彩的表述方式是：H(hue)色相，S(saturation)飽和度，以及 L(lightness)亮度。聽(tīng)起來(lái)一樣復雜？稍后你就會(huì )發(fā)現，與“反人類(lèi)”的RGB模型相比，HSL是多么的友好。
HSL的H(hue) 分量，代表的是人眼所能感知的顏色范圍，這些顏色分布在一個(gè)平面的色相環(huán)上，取值范圍是0°到360°的圓心角，每個(gè)角度可以代表一種顏色。色相值的意義 在于，我們可以在不改變光感的情況下，通過(guò)旋轉色相環(huán)來(lái)改變顏色。在實(shí)際應用中，我們需要記住色相環(huán)上的六大主色，用作基本參照：360°/0°紅、 60°黃、120°綠、180°青、240°藍、300°洋紅，它們在色相環(huán)上按照60°圓心角的間隔排列，如下圖：

HSL的S(saturation)分量，指的是色彩的飽和度，它用0%至100%的值描述了相同色相、明度下色彩純度的變化。數值越大，顏色中的灰色越少，顏色越鮮艷，呈現一種從理性(灰度)到感性(純色)的變化，如下圖：

HSL的L(lightness)分量，指的是色彩的明度，作用是控制色彩的明暗變化。它同樣使用了0%至100%的取值范圍。數值越小，色彩越暗，越接近于黑色；數值越大，色彩越亮，越接近于白色。

nbsp;
HSL能為我們帶來(lái)什么？
我們來(lái)做一個(gè)基于HSL的調色實(shí)踐。想想開(kāi)篇提到的“海棠紅”，那應該是一個(gè)介于洋紅和紅色之間的，性感嬌艷的顏色。我們可以假定它在色相環(huán)H上的角度是330°左右，飽和度較高，明度適中，看看那是什么顏色？

我們想要的顏色應該再接近紅色一點(diǎn)，讓我們把色相H旋轉到350°，現在好多了。

通過(guò)改變色相值H，我們實(shí)現了色相從洋紅向海棠紅的偏移。 大感覺(jué)接近了，但還是略微有點(diǎn)灰暗，還談不上性感……
現在，我們可以通過(guò)增加飽和度S，讓這個(gè)顏色變得更鮮活。

增加了20%的飽和度之后，顏色看起來(lái)亮麗了許多。

還是不對。海棠紅是屬于少女的顏色，應當再嫩一點(diǎn)、通透一點(diǎn)，不會(huì )這么熱烈。我們需要通過(guò)增加亮度L，來(lái)找到那種微妙的感覺(jué)。

把剛才的顏色略微提亮10%，我們終于得到了想要的色彩：

同理，面對“加點(diǎn)橙色進(jìn)去， 再亮那么一點(diǎn)點(diǎn)”這樣粗魯的要求，我們可以?xún)H通過(guò)心算就大致確定色相環(huán)的相位和明度值。在這里，我們需要讓H增加25°，L增加5%：

就是這樣！現在讓我們重溫一下整個(gè)調色過(guò)程。

在使用HSL調色的過(guò)程中，我們并不需要打開(kāi)拾色器，也不需要了解復雜的色光混合原理，這是一個(gè)自然的、感性的、易于理解的過(guò)程。
相比之下，RGB調色方式顯得非常笨拙、無(wú)法理解。
我們對色彩的認識往往是這樣的：“這是什么顏色？深淺如何？明暗如何？”，這種認識是基于人類(lèi)的主體感官而形成的，并不是基于反射光的物理性質(zhì)。與RGB色彩模型相比，HSL色彩模型對色彩的表述方式非常友好，非常符合人類(lèi)對色彩的感知習慣。
HSL色彩模型誕生于上個(gè)世紀，已經(jīng)在很多領(lǐng)域被廣泛應用。但不同的色彩模型有著(zhù)不同的適用場(chǎng)景，就GUI設計領(lǐng)域來(lái)說(shuō)，對HSL色彩模型的合理應用能 讓色彩處理的工作更加人性化，有助于建立和諧的人機交互關(guān)系，提升產(chǎn)品體驗。當你像我一樣在RGB的異度空間中苦苦掙扎的時(shí)候，不妨換一種思維方式。也許 HSL就是為你解決問(wèn)題的關(guān)鍵。

附：HSL色彩模型在產(chǎn)業(yè)中的應用
互聯(lián)網(wǎng)：CSS3開(kāi)始對HSL提供支持，借助人性化的HSL模型，Web設計師可以更直觀(guān)的定義所需的色彩，并能輕松的控制網(wǎng)頁(yè)中的色彩變化。

電子辦公：Microsoft Office的拾色器支持HSL色彩模型，用戶(hù)可以簡(jiǎn)單的調配出協(xié)調的顏色并直接應用于電子文檔中。

數碼暗房：Adobe Photoshop Lightroom軟件中的HSL調色器，使數碼攝影師的色彩游戲變得更為生動(dòng)直觀(guān)。

軟件換膚：在軟件圖形界面設計中應用HSL色彩，并設定簡(jiǎn)單的變換規則，便可以實(shí)現友好易用的換膚功能。

視頻監控/動(dòng)作捕捉：HSL色彩模型的亮度L分量與彩色信息無(wú)關(guān)，易于辨識分析；H與S分量與人的視覺(jué)感知原理相近，因此非常適用于圖像理解、模式識別等與視覺(jué)感知有關(guān)的圖像應用。

醫學(xué)影像：借助HSL色彩模型的優(yōu)勢，醫學(xué)影像學(xué)專(zhuān)家可以用更好的方式還原醫學(xué)影像信息，或對生物體樣本進(jìn)行精確直觀(guān)的色譜分析。

大連仟億科技、大連網(wǎng)站建設、大連網(wǎng)站制作、大連網(wǎng)頁(yè)制作、大連網(wǎng)頁(yè)設計、大連網(wǎng)站設計、大連網(wǎng)站推廣、大連軟件開(kāi)發(fā)、大連網(wǎng)絡(luò )公司

---