網站開(kāi)發進階（六十七）淺談css中(zhōng)hsl()和hsla()設置顔色值的方法與應用

【摘要】 HSL 是CSS3引進的一(yī)種将 RGB 色彩模型中(zhōng)的點在坐标系中(zhōng)的表示法。這兩種表示法試圖做到比基于笛卡爾坐标系的幾何結構 RGB 更加直觀。

前言

HSL 是CSS3引進的一(yī)種将 RGB 色彩模型中(zhōng)的點在坐标系中(zhōng)的表示法。這兩種表示法試圖做到比基于笛卡爾坐标系的幾何結構 RGB 更加直觀。

定義與用法

hsl() 函數使用色相、飽和度、亮度來定義顔色。

HSL 即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。

• 色相（H）是色彩的基本屬性，就是平常所說的顔色名稱，如紅色、黃色等。

• 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取值 0-100% 。

• 亮度（L），取值 0-100%，增加亮度，顔色會向白(bái)色變化；減少亮度，顔色會向黑色變化。

CSS 語法

hsl(hue, saturation, lightness)

值

描述

實例

定義 HSL 顔色：

表格中(zhōng)的數字表示支持該函數的第一(yī)個浏覽器版本号。

hsla()

css中(zhōng)存在兩種設置顔色值的方式：hsl()和hsla()，它們基本上都是采用了HSL色彩模式的方法來設置顔色，接下(xià)來就來看看什麽是HSLA色彩模式。

HSLA是在HSL的基礎上增加了一(yī)個透明度(A)的設置,取值0~1之間。

拓展閱讀

• 《Vue進階（幺柒幺）：前端用戶體(tǐ)驗提升（五）Flex實現彈性布局》

• 《Vue進階（幺陸捌）：前端用戶體(tǐ)驗提升（三）應用vw/vh實現自定義布局》

  
  

來源：https://bbs.huaweicloud.com/blogs/249321