人性化的HSL模型

2021-07-11 07:45:05 字數 2245 閱讀 2661

hsl色彩模型又是什麼?

hsl同樣使用了3個分量來描述色彩,與rgb使用的三色光不同,hsl色彩的表述方式是:h(hue)色相,s(saturation)飽和度,以及l(lightness)亮度。聽起來一樣複雜?稍後你就會發現,與「***」的rgb模型相比,hsl是多麼的友好。

hsl的h(hue)分量,代表的是人眼所能感知的顏色範圍,這些顏色分布在乙個平面的色相環上,取值範圍是0°到360°的圓心角,每個角度可以代表一種顏色。色相值的意義在於,我們可以在不改變光感的情況下,通過旋轉色相環來改變顏色。在實際應用中,我們需要記住色相環上的六大主色,用作基本參照:360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅,它們在色相環上按照60°圓心角的間隔排列,如下圖:

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

hsl的l(lightness)分量,指的是色彩的明度,作用是控制色彩的明暗變化。它同樣使用了0%至100%的取值範圍。數值越小,色彩越暗,越接近於黑色;數值越大,色彩越亮,越接近於白色。

hsl能為我們帶來什麼?

我們來做乙個基於hsl的調色實踐。想想開篇提到的「海棠紅」,那應該是乙個介於洋紅和紅色之間的,**嬌豔的顏色。我們可以假定它在色相環h上的角度是330°左右,飽和度較高,明度適中,看看那是什麼顏色?

我們想要的顏色應該再接近紅色一點,讓我們把色相h旋轉到350°,現在好多了。

通過改變色相值h,我們實現了色相從洋紅向海棠紅的偏移。 大感覺接近了,但還是略微有點灰暗,還談不上**……

現在,我們可以通過增加飽和度s,讓這個顏色變得更鮮活。

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

還是不對。海棠紅是屬於少女的顏色,應當再嫩一點、通透一點,不會這麼熱烈。我們需要通過增加亮度l,來找到那種微妙的感覺。

把剛才的顏色略微提亮10%,我們終於得到了想要的色彩:

同理,面對「加點橙色進去, 再亮那麼一點點」這樣粗魯的要求,我們可以僅通過心算就大致確定色相環的相位和明度值。在這裡,我們需要讓h增加25°,l增加5%:

就是這樣!現在讓我們重溫一下整個調色過程。

在使用hsl調色的過程中,我們並不需要開啟拾色器,也不需要了解複雜的色光混合原理,這是乙個自然的、感性的、易於理解的過程。

相比之下,rgb調色方式顯得非常笨拙、無法理解。

我們對色彩的認識往往是這樣的:「這是什麼顏色?深淺如何?明暗如何?」,這種認識是基於人類的主體感官而形成的,並不是基於反射光的物理性質。與rgb色彩模型相比,hsl色彩模型對色彩的表述方式非常友好,非常符合人類對色彩的感知習慣。

hsl色彩模型誕生於上個世紀,已經在很多領域被廣泛應用。但不同的色彩模型有著不同的適用場景,就gui設計領域來說,對hsl色彩模型的合理應用能讓色彩處理的工作更加人性化,有助於建立和諧的人機互動關係,提公升產品體驗。當你像我一樣在rgb的異度空間中苦苦掙扎的時候,不妨換一種思維方式。也許hsl就是為你解決問題的關鍵。

人性化公司

在外企實習了一段時間,在民企公司也工作了一段時間。覺得人性化公司還是非常重要的,公司要想發展最重要的就是員工,也就是人力資源,如何能夠創造乙個良好的員工工作環境,給員工乙個主人公的感覺,公司不好自己都著急呢?新人的優勢 在工作環境方面重要一點 廣開言路。相信這四個字很熟悉了,覺得理所當然了。其實不然...

軟體人性化的體現

朱金燦 我想軟體的人性化體現在 呢?我想到了一下幾條,不當之處,還請大家指正。一 穩定性。有人可能認為穩定性無關人性化。恰恰相反,我認為穩定性是最大的人性化。試想,乙個不穩定的軟體,談何人性化呢?軟體的穩定,並不意味軟體不出錯,而是必須確保有足夠的錯誤提示,而不是直接導致軟體崩潰。二 符合業務邏輯 ...

人性化的可讀時間

人性化的可讀性時間 解法一 def make readable req second 02d req 60 是取餘數 minute 02d req 3600 60 hour 02d req 3600 向下取整 return format hour,minute,second print make r...