CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS @charset 規(guī)則 CSS 函數(shù)(Functions)

CSS hsl() 函數(shù)

CSS hsl()函數(shù)可用于在使用CSS時(shí)提供顏色值。它允許您通過指定顏色的色相、飽和度和光成分來指定顏色值。

CSS 函數(shù)

在線示例

定義 HSL 顏色：

示例

<!DOCTYPE html>
<title>菜鳥教程(cainiaoplus.com)</title> 
<style>
body {
    background: hsl(30, 100%, 50%);
    color: hsl(30, 100%, 75%);
    font-size: 1.3em;
    }
</style>
<h1>Down in Africa</h1>
<p>要花一些時(shí)間去做我們從未有過的事情...</p>

測試看看 ?/?

定義與用法

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

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

色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。
飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數(shù)值。
亮度（L），取 0-100%，增加亮度，顏色會(huì)向白色變化；減少亮度，顏色會(huì)向黑色變化。

HSL 是一種將 RGB 色彩模型中的點(diǎn)在圓柱坐標(biāo)系中的表示法。這兩種表示法試圖做到比基于笛卡爾坐標(biāo)系的幾何結(jié)構(gòu) RGB 更加直觀。

支持版本：CSS3

瀏覽器兼容性

表格中的數(shù)字表示支持該函數(shù)的第一個(gè)瀏覽器版本號(hào)。

函數(shù)
hsl()	1.0	9.0	1.0	3.1	9.5

CSS 語法

hsl(hue, saturation, lightness)

值	描述
hue - 色相	定義色相 (0 到 360) - 0 (或 360) 為紅色, 120 為綠色, 240 為藍(lán)色
saturation - 飽和度	定義飽和度; 0% 為灰色， 100% 全色
lightness - 亮度	定義亮度 0% 為暗, 50% 為普通, 100% 為白

顏色變化的示例

在下面的圖表中，所有樣本的色調(diào)和亮度完全相同。唯一的區(qū)別是飽和度。

`hsl(240, 100%, 50%)`
`hsl(240, 90%, 50%)`
`hsl(240, 80%, 50%)`
`hsl(240, 70%, 50%)`
`hsl(240, 60%, 50%)`
`hsl(240, 50%, 50%)`
`hsl(240, 40%, 50%)`
`hsl(240, 30%, 50%)`
`hsl(240, 20%, 50%)`
`hsl(240, 10%, 50%)`
`hsl(240, 0%, 50%)`

在下圖中，所有樣本的色相和飽和度完全相同。唯一的區(qū)別是亮度級(jí)別。

`hsl(240, 100%, 100%)`
`hsl(240, 100%, 90%)`
`hsl(240, 100%, 80%)`
`hsl(240, 100%, 70%)`
`hsl(240, 100%, 60%)`
`hsl(240, 100%, 50%)`
`hsl(240, 100%, 40%)`
`hsl(240, 100%, 30%)`
`hsl(240, 100%, 20%)`
`hsl(240, 100%, 10%)`

CSS 函數(shù)

CSS @charset 規(guī)則 CSS 函數(shù)(Functions)