HSL 颜色究竟是如何书写的?

问题描述

我不清楚 HSL 颜色的书写方式.W3 有这样的:

I'm unclear about how HSL colours are meant to be written. W3 has them like this:

color: hsl(120, 100%, 50%);

而 ThreeJs 是这样要求他们的:

Whereas ThreeJs asks for them like this:

h — hue value between 0.0 and 1.0
s — saturation value between 0.0 and 1.0
l — lightness value between 0.0 and 1.0

我在网络上看到了两种方式的 HSL 颜色，但我真的不明白 - 哪个是正确的，你如何在两者之间转换?

I've seen HSL colours written both ways across the web and really don't get it - which is correct, and how do you convert between the two?

干杯.

推荐答案

对于 CSS，W3C 建议 CSS 颜色模块级别3 定义了 HSL必须在 color 属性中指定颜色值:

For CSS, the W3C Recommendation CSS Color Module Level 3 defines how HSL color values have to be specified in the color property:

HSL 颜色编码为三元组(色调、饱和度、亮度).色调表示为色环的角度(即圆圈中表示的彩虹).这个角度通常以度为单位来衡量，所以这个单位在 CSS 中是隐含的；在语法上，只给出了 a.[…] 饱和度和亮度以百分比表示.

tl;dr:

1. 色调:无单位
2. 饱和度:百分比
3. 亮度:百分比

下一个版本，CSS Color Module Level 4(目前只是一个编辑器草案)指定这个更好(似乎hue参数可以有更多的值):

The next version, CSS Color Module Level 4 (which is currently only an Editor’s Draft) specifies this better (and it seems that the hue argument can have more values):

HSL 颜色被指定为色调、饱和度和亮度的三元组.hsl() 函数的语法是:

hsl() = hsl( <hue>, <percentage>, <percentage> )
hsla() = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<hue> = <number> | <angle> | <named-hue>

这篇关于HSL 颜色究竟是如何书写的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！