CSS 合法颜色值
CSS 合法的颜色值可以通过多种方式指定,包括命名颜色、十六进制、RGB、RGBA、HSL、HSLA,以及颜色函数。
以下是几种常见的合法颜色值格式:
命名颜色:直接使用颜色名称,例如:red、blue、green 等。
color: red;
十六进制颜色:使用 #RRGGBB 或 #RGB 形式的十六进制值。
color: #ff0000; /* 红色 */ color: #f00; /* 简写形式,红色 */
RGB 颜色:使用 rgb() 函数指定红、绿、蓝三色的值,每个值在 0-255 之间。
color: rgb(255, 0, 0); /* 红色 */
RGBA 颜色:类似于 rgb(),但增加了 alpha 通道,用于指定透明度,值范围在 0(完全透明)到 1(完全不透明)。
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
HSL 颜色:使用 hsl() 函数指定色调(0-360°)、饱和度(0%-100%)和亮度(0%-100%)。
color: hsl(0, 100%, 50%); /* 红色 */
HSLA 颜色:类似于 hsl(),但增加了 alpha 通道,用于透明度控制。
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
CSS 颜色函数 color():使用颜色空间定义颜色,如 color(display-p3 1 0 0)。这种方法允许使用更广泛的颜色空间。
color: color(display-p3 1 0 0);
十六进制颜色
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是:#RRGGBB,其中 RR(红色),GG(绿色)和 BB(蓝色)。所有值必须介于 0 和 FF 之间。
例如,#0000FF值呈现为蓝色,因为蓝色的组成设置为最高值(FF)而其他设置为 0。
RGB 颜色
RGB 颜色值在所有主要浏览器都支持。
RGB 颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在 0 和 255 之间,或一个百分比值(从0%到100%)之间的整数。
例如 RGB(0,0,255)值呈现为蓝色,因为蓝色的参数设置为最高值(255)而其他设置为 0。
此外,下面的值定义相同的颜色:RGB(0,0,255),RGB(0%,0%,100%)。
RGBA 颜色
RGBA 颜色值被 IE9, Firefox3+, Chrome, Safari,和 Opera10+ 支持。
RGBA 颜色值是 RGB 颜色值 alpha 通道的延伸 - 指定对象的透明度。
RGBA 颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的参数。
HSL颜色
IE9, Firefox, Chrome, Safari 和 Opera 10+,支持 HSL 颜色值。
HSL 代表色相,饱和度和亮度 - 使用色彩圆柱坐标表示。
HSL 颜色值指定:HSL(色调,饱和度,明度)。
色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。
HSLA 颜色
HSLA 颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.
HSLA 的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。
指定HSLA颜色值:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
预定义/跨浏览器的颜色名称
147 是在 HTML 和 CSS 颜色规范预定义的颜色名称。你可以查看我们的 预定义颜色名称表。