王鹏飞

Blog

Tutorial

About

CSS

2021年7月30日

颜色

在css中颜色的值可以有多种格式设置。本节内容讲述一些最常用的方式。

一. 数值类型的颜色

用数值表示颜色,也有几种不同的方式。

十六进制

h1 {
    color: #b71540;
}

十六进制数值表示法是RGB的一种简写方式,六个数字中每两个数字为R、G、B赋予一个0-255区间的值。

据统计,十六进制是最受欢迎的颜色表示格式。

你还可以指定颜色的透明度(alpha)。只需要在十六进制后面再增加两位变为8位即可。例如#11223344其中R=11、G=22、B=33、A=44。alpha值越接近255,颜色的透明度越低,0表示完全透明,255(即十六进制的FF)表示完全不透明。

十六进制数值可以简写,当RGBA的各自的两位数都相同时,可以用一位数值代替。例如#11223344可以简写为#1234#AABBCCDD可以简写为#ABCD#AABBCC可以简写为#ABC

RGB(Red, Green, Blue)

h1 {
    color: rgb(183, 21, 64);
}

这种方式使用函数rgb()定义,参数值可以使用数值(0-255)或者百分比(0%-100%)表示,0%等于0,100%等于255。

将颜色设置为黑色,可以这样定义rgb(0, 0, 0),也可以使用百分比形式rgb(0%, 0%, 0%)

这种形式也支持设置透明度。可以在红色值后面添加/,或者使用rgba()函数设置透明度,建议大家使用rgba()函数设置,因为这种方式比较明显,也是最常用的方式:

color: rgb(0 0 0 / 0.5); // 透明度为50%

color: rgba(0, 0, 0, 0.5); // 使用rgba()设置透明度为50%

注意:rgb()函数中参数间的逗号,也可以用空格代替,这是为了与一些新的颜色函数统一。像lab()和lch()等函数都是使用空格代替逗号作为参数分割符号的。

HSL(Hue, Saturation, Lightness)

h1 {
    color: hsl(344, 79%, 40%);
}

HSL表示色彩、饱和度、亮度。Hue描述了色轮上的颜色值,从0度到360度,0度表示红色(360度也是红色),180度或者50%表示蓝色。

css color

Saturation表示所选颜色的亮度。饱和度为0%,将显示为灰色。lightness表述的是光照强度,你可以想像一个红色的物体在不同光照强度下表现的颜色,当lightness为100%,最终显示为白色,当lightness为0%,最终显示为黑色。注意Saturation和lightness参数必须传百分比数值。这个lightness其实就是图形学中的颜色反射定律

颜色关键字

总共有148个命名的颜色。它们都是普通的英文单词,例如purple、tomato。比较常用的有black、white、red、blue、gray和transparent。

二. 何处使用

如果一个css属性接受<color>数据类型作为值,那么上面讲述的所有方式都可以用来设置这个css属性的值。例如可以用colortext-shadowtext-decoration-color描述文字的颜色样式,这些属性都接受<color>类型的数值。设置背景色,可以通过background或者background-color属性设置颜色。另外还有border-coloroutline-color等等都接受颜色数值类型。

附:参考资料

(完)。

【css教程】005 继承
【css教程】007 尺寸单位

留言(0


发表评论

邮箱地址不会被公开。*表示必填项