14、CSS中颜色设置方法

html-css014

14、CSS中颜色设置方法,第1张

在我们的显示屏中,一个像素点由三原色构成,分别为:红、绿、蓝。然而在计算机中使用0-255来表示某个原色的不同程度,在二进制中,可以使用八位二进制(00000000-11111111)进行表示。在十六进制中用( 00-ff )表示。那么红色(0-255),绿色(0-255),蓝色(0-255)三原色组成的颜色就有256*256*256种,组成了屏幕中五彩缤纷的画面。

由此就可以衍生出颜色的表示方式:

加入透明度:

使用色相表示(hsl):

这是一种将所有颜色对应成一个圆,一个角度代表一种颜色,所以取值范围为0-360,但是它还包括了饱和度和亮度。

h:0-360,色相

s:0-100%,饱和度

l:0-100%,亮度

例如:hsl(0, 50%, 50%)

颜色值

CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)。

十六进制值使用三个双位数来编写,并以 # 符号开头。

颜色

颜色 HEX

颜色 RGB

#000000rgb(0,0,0)

#FF0000rgb(255,0,0)

#00FF00rgb(0,255,0)

#0000FFrgb(0,0,255)

#FFFF00rgb(255,255,0)

#00FFFFrgb(0,255,255)

#FF00FFrgb(255,0,255)

#C0C0C0rgb(192,192,192)

#FFFFFFrgb(255,255,255)

亲自试一试

1600 万种不同的颜色

从 0 到 255 种红绿蓝值能够组合出总共超过一千六百万种不同的颜色(根据 256 x 256 x 256 计算)。

大多数现代的显示器都能显示出至少 16384 种不同的颜色。

如果您查看下面的表格,您将看到红光从 0 到 255 变化后的结果,此时绿光和蓝光为零。

如需查看红光由 0 向 255 变化的完整颜色混合器列表,请点击下面的十六进制值或 rgb 值。

1、用颜色名表示

如:white、red、greenyellow、gold等。

2、用十六进制的颜色值表示(红、绿、蓝)

#FF0000或者#F00

3、用rgb(r,g,b)函数表示

如:rgb(255,255,0)

4、用hsl(Hue,Saturation,Lightness)函数表示(色调、饱和度、亮度)

如:hsl(120,100%,100%),色调0代表红色,120代表绿色,240代表

蓝色

5、用rgba(r,g,b,a)函数表示

其中a表示的是改颜色的透明度,取值范围是0~1,其中0代表完全透明。

6、用hsla(Hue,Saturation,Lightness,alpha)函数表示

色调、饱和度、亮度、透明度