CSS3中使用HSL顏色指南 · CSS進階

[TOC] ## 示例 HSL模式基于一個360色相環。第一個數字代表色相（色相環角度），60度時為黃色。120度綠色。180度青色。240度藍色。300度洋紅色。360度紅色。第二個數數字代表飽和度。值為百分比。第三個數字是亮度，值為百分比。 ```css hsl(255,90%,50%) ``` ## 介紹 CSS3的HSL方法被現代瀏覽器廣泛的支持，但是很多開發者都不喜歡使用它，部分原因是HSL顏色模式和其它的CSS顏色模式有很大的差別： * 你可以非常容易的將十六進制的顏色模式轉換為RGB顏色模式，但是要轉換為HSL顏色模式就比較困難了。 * Photoshop中的Hex和RGB顏色可以直接在CSS文件中使用，但是Photoshop中的HSB模式顏色和HSL是不同的。 * HSL的色彩范圍和Hex和RGB顏色是相同的。雖然有上面的一些限制，但是HSL顏色模式還是一個值得推薦使用的顏色模式。 ## 理解HSL顏色模式系統 ![](https://box.kancloud.cn/e72e38337a2293ad787aaa23ec91d7b2_799x631.png) 理解HSL顏色，你首先需要從另一個角度來理解顏色。注意觀察上面的色盤，你可以看到紅、綠和藍三種顏色。紅色在最是那干嘛，被設置為0度，綠色是120度，藍色是240度。它們將色盤分為三個部分。在它們的中間分別是黃色、青色和洋紅（CMYK顏色系統）。它們的角度分別為60度、180度和300度。從色盤的頂部開始順時針方向旋轉，是彩虹的七彩顏色。從60度開始，分別是：黃色、綠色、青色、藍色、洋紅和紅色。 HSL顏色就是指上面顏色色盤中的多少度的顏色值。例如，紫色在藍色（240°）和洋紅（300°）之間，所以他的HSL顏色是hsl(270,100%,50%)。如果想要紫色偏藍，就要往色盤藍色方向移動角度值，得到hsl(255,100%,50%)。你會注意到角度后面還有兩個百分比的值，**第一個值是顏色的飽和度，也就是值顏色的“強度”**。在色盤的最外層，顏色的飽和度為100%，最外層的顏色是最有“色彩”的。色盤越往中心移動顏色越灰。所以飽和度也可以理解為：顏色距離灰色有多遠？HSL顏色的飽和度為0%時就都變為相同的灰色。 #### HSL飽和度值: hsl(45,x%,50%) <div class="hsl" style="overflow:hidden;clear:right;margin-bottom:2rem"> hsl(45,0%,50%) hsl(45,25%,50%) hsl(45,50%,50%) hsl(45,75%,50%) hsl(45,100%,50%) </div> **HSL顏色的兩個百分比值必須同時包含飽和度和亮度值才能正常顯示。** 亮度是指顏色偏向于白色還是黑色。50%的亮度值表示顏色位于黑色和白色中間，這時顏色會基本保持原來的顏色不變。減少亮度會增加黑色調：當亮度為0%時顏色變為黑色。增加亮度會增加白色調：當亮度值為100%時顏色變為白色。 #### HSL亮度值: hsl(90,100%,x%) <div class="hsl" style="overflow:hidden;clear:right;margin-bottom:2rem"> hsl(90,100%,0%) hsl(90,100%,25%) hsl(90,100%,50%) hsl(90,100%,75%) hsl(90,100%,100%) </div> 當你熟悉了上面色盤的顏色分布的時候，你會發現在CSS中使用HSL顏色會比使用RGB顏色更加容易和便于管理。有時候，使用HSL顏色會有一些優勢. ## HSL顏色在網站中的三個應用場景（優勢）在某些時候，在CSS中使用HSL顏色會比使用其它顏色模式更有優勢。本文將從三個方面來介紹在什么時候應該使用HSL顏色。 ### 為網站顏色方案創建快速原型 HSL顏色非常適合于插件網站的顏色方案，特別是開發者沒有很大的把握和色彩理論的時候。HSL顏色通過一些簡單的規則就可以創建適應任何需要的顏色模式。 #### HSL的互補色方案 ![*hsl complimentary color scheme*](https://box.kancloud.cn/667fd548161434e0a32535bf3fa972af_205x205.png) 例如你想為你的網站快速的創建一個顏色方案，假如你的網站LOGO是橙色的，它對應的HSL顏色值為：hsl(30,90%,29%)。要生成一個互補色，你可以為色調值增加180度，在這個例子中，得到的HSL顏色的結果是：hsl(210,90%,29%)。 #### HSL的單色配色方案 ![*hsl monochromatic color scheme*](https://box.kancloud.cn/8f5d76ecc2df0aa1ed3fee5f2842f5df_205x205.png) 下面來看看如何創建單色的配色方案：一個簡單的方法是將飽和度值減去它的30%。如果我們的基色是hsl(30,90%,29%)，那么另外的兩個顏色分別是：hsl(0,90%,29%)和hsl(60,90%,29%)。另外還可以配置三色方案：將基色的色調值遞增120度即可。上面簡單的配置就得到三種網站顏色的配色方案，是不是非常快捷簡單呢？ ## 快速調整顏色如果你的網站使用的顏色模式時RGB模式或HEX顏色模式，那么當你想將網站顏色調整得亮一些的時候，你必須同時調整三個值，這些微調工作是非常煩人的。如果你使用的是HSL顏色模式，那么工作就變得簡單了： ```css body { background: hsl(60,100%,50%); } ``` 你只需要調整一些亮度值就可以了 ```css body { background: hsl(60,100%,40%); } ``` 如果你使用我們上面所說的HSL顏色方案，那么你就可以非常輕松的調整其它的顏色。 ## 為樣式創建快速顏色變體我們以一個帶漸變色的圓點按鈕為例子，它的基本樣子如右邊的所示（只用webkit內核瀏覽器可以看到正確的樣式）。它的CSS3代碼如下，注意沒有寫瀏覽器廠商的前綴： ![](https://box.kancloud.cn/3cc3a18107f88fbe375c30e395ca9447_200x67.png) ```css input { background-image: radial-gradient( hsla(0,100%,90%,1) 0%, hsla(0,100%,70%,1) 15%, hsla(0,100%,60%,.3) 28%, hsla(0,100%,30%,0) 70% ); } ``` 如果我們想將按鈕漸變的顏色變為藍色，我們只需要它的色調值即可： ![](https://box.kancloud.cn/e858bddc181b302621a63494606d9732_198x65.png) ```css input { background-image: radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% ); } ``` 可以看到，新生成的藍色光和原來的紅色光的亮度和強度是相同的，只是色調值發生了一些變化。你可以非常輕松的將它修改為其它任何顏色。 ## 什么時候不應該使用HSL顏色？答案是：在你的網站必須指出IE8及以下的瀏覽器的時候，你不能夠使用HSL顏色來作為你的網站顏色。 **Sass可以自動將HSL顏色轉換為RGB顏色或HEX顏色。** ## rgb 到 hsl 的轉換這里有個小 tips 可能有些人不知道，在開發階段我們只有一個 rgb 值，但是希望轉換成 hsl 值，使用 chrome 開發者工具可以很便捷的做到，如下圖，我們只需要選中我們想轉換的顏色值，按住鍵盤左 shift，點擊這個顏色表示框，即可進行轉換： ![](http://images2015.cnblogs.com/blog/608782/201606/608782-20160628102801046-1368012770.gif) ## 參考 [jQuery之家](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503291595.html) [CSS 顏色體系詳解](http://www.cnblogs.com/coco1s/p/5622534.html)