html的hsl形式的颜色选择器,hsl() - 色相饱和度明度模式 - css3颜色

hsl()

版本：CSS3

hsl()函数符被定义为色相-饱和度-明度(Hue-saturation-lightness)模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。(通过保持相同的色相并改变明度/暗度和饱和度)。

浏览器支持

IE9以上版本的浏览器都支持hsl()

hsl()函数hsl(H,S,L)

取值：

色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。这个角度作为一个无单位的red=0=360，其它颜色分散于圆环，所以green=120,blue=240，以此类推。作为一个角度，它隐含像-120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。

100%是满饱和度，而0%是一种灰度。

100%明度是白色，0%明度是黑色，而50%明度是“一般的”。

实例

document

div{

background-color:hsl(360,50%,50%);

}

hsl颜色值

效果图：

更多内容请参阅：CSS颜色值、CSS颜色hsl(0, 100%,50%) /* red */

hsl(30, 100%,50%)

hsl(60, 100%,50%)

hsl(90, 100%,50%)

hsl(120,100%,50%) /* green */

hsl(150,100%,50%)

hsl(180,100%,50%)

hsl(210,100%,50%)

hsl(240,100%,50%) /* blue */

hsl(270,100%,50%)

hsl(300,100%,50%)

hsl(330,100%,50%)

hsl(360,100%,50%) /* red */

hsl(120,100%,25%) /* dark green */

hsl(120,100%,50%) /* green */

hsl(120,100%,75%) /* light green */

hsl(120,100%,50%) /* green */

hsl(120, 67%,50%)

hsl(120, 33%,50%)

hsl(120, 0%,50%)

hsl(120, 60%,70%) /* pastel green */