Skip to main content

色彩

halc#

颜色具有多种特性,包括色相、饱和度和亮度。 CSS3 引入了 hsl() 做为颜色的描述方式。

色相 是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。 以颜色光谱为例,光谱左边从红色开始,移动到中间的绿色,一直到右边的蓝色,色相值就是沿着这条线的取值。 在 hsl() 里面,色相用色环来代替光谱,色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度 是指色彩的纯度,也就是颜色里灰色的占比。 饱和度越高则灰色占比越少,色彩也就越纯;反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度 决定颜色的明暗程度,也就是颜色里白色或者黑色的占比。 其中,100% 的亮度表示纯白色, 0% 的亮度则表示纯黑色;而 50% 的亮度就表示在色相中选取的颜色。

下面是一些使用 hsl() 描述颜色的例子,颜色都为满饱和度,中等亮度:

颜色HSL
hsl(0, 100%, 50%)
hsl(60, 100%, 50%)
绿hsl(120, 100%, 50%)
蓝绿hsl(180, 100%, 50%)
hsl(240, 100%, 50%)
品红hsl(300, 100%, 50%)