對(duì)于視覺設(shè)計(jì)師來說，RGB、CMYK什么的就像左右手一樣熟悉。但如果僅用心算的方法，不借助于Photoshop拾色器或任何類似的工具，你可不可以快速說出“海棠紅”所對(duì)應(yīng)的RGB色值?如果再加一點(diǎn)橙色進(jìn)去，把亮度提高一點(diǎn)，色值又是多少?

　　很難回答，是吧……面對(duì)這些坑爹的問題，視覺設(shè)計(jì)師/前端工程師們通常只能打開Photoshop，輸入當(dāng)前顏色對(duì)應(yīng)的色值，在色板上調(diào)出新的顏色，再把色值復(fù)制下來，替換當(dāng)前的色彩。　　人生很短暫，這樣白白浪費(fèi)掉大塊的時(shí)間，你甘心嗎?　　那么，讓我們來探索一下有沒有更好的解決方案。讓人又愛又恨的RGB　　RGB是基于色光混合的原理設(shè)計(jì)的，是一種以硬件為導(dǎo)向的色彩模型，它描述了顯示器的電子槍打在Red紅、Green綠、Blue藍(lán)三色發(fā)光極上的顯色方式。當(dāng)紅綠藍(lán)三色光的亮度均為大值(255)的時(shí)候，屏幕上重現(xiàn)的顏色就是最亮的白色，都為0的時(shí)候，結(jié)果就是黑色。　　如果想要得出剛才提到的“海棠紅”，我們就要把紅光調(diào)到最亮，把綠光的亮度調(diào)到1/5左右，再把藍(lán)光的亮度調(diào)到1/3左右，如下圖：

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

　　雖然得到了需要的色彩，但我們所做的事情與“橙色”或“增加亮度”實(shí)在扯不上關(guān)系。這種調(diào)色方法，完全不符合我們對(duì)顏色的直觀感受。連這種事都可以忍受嗎?不要再假裝視覺設(shè)計(jì)師了，舞臺(tái)燈光師才是你的真實(shí)身份!HSL色彩模型又是什么?　　HSL同樣使用了3個(gè)分量來描述色彩，與RGB使用的三色光不同，HSL色彩的表述方式是：H(hue)色相，S(saturation)飽和度，以及L(lightness)亮度。聽起來一樣復(fù)雜?稍后你就會(huì)發(fā)現(xiàn)，與“反人類”的RGB模型相比，HSL是多么的友好。　　HSL的H(hue)分量，代表的是人眼所能感知的顏色范圍，這些顏色分布在一個(gè)平面的色相環(huán)上，取值范圍是0°到360°的圓心角，每個(gè)角度可以代表一種顏色。色相值的意義在于，我們可以在不改變光感的情況下，通過旋轉(zhuǎn)色相環(huán)來改變顏色。在實(shí)際應(yīng)用中，我們需要記住色相環(huán)上的六大主色，用作基本參照：360°/0°紅、60°黃、120°綠、180°青、240°藍(lán)、300°洋紅，它們?cè)谏喹h(huán)上按照60°圓心角的間隔排列，如下圖：

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

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

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

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

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

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

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

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

　　同理，面對(duì)“加點(diǎn)橙色進(jìn)去， 再亮那么一點(diǎn)點(diǎn)”這樣粗魯?shù)囊螅覀兛梢詢H通過心算就大致確定色相環(huán)的相位和明度值。在這里，我們需要讓H增加25°，L增加5%：

　　就是這樣!現(xiàn)在讓我們重溫一下整個(gè)調(diào)色過程。

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

　　電子辦公：Microsoft Office的拾色器支持HSL色彩模型，用戶可以簡單的調(diào)配出協(xié)調(diào)的顏色并直接應(yīng)用于電子文檔中。

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

　　軟件換膚：在軟件圖形界面設(shè)計(jì)中應(yīng)用HSL色彩，并設(shè)定簡單的變換規(guī)則，便可以實(shí)現(xiàn)友好易用的換膚功能。

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

　　醫(yī)學(xué)影像：借助HSL色彩模型的優(yōu)勢，醫(yī)學(xué)影像學(xué)專家可以用更好的方式還原醫(yī)學(xué)影像信息，或?qū)ι矬w樣本進(jìn)行精確直觀的色譜分析。

新聞名稱：色生心中：人性化的HSL模型
網(wǎng)頁路徑：http://m.newbst.com/news17/164317.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、靜態(tài)網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)