<color>
<color>
CSS 数据类型 表示颜色。<color>
也可能包含一个alpha 通道透明度值,指示颜色应如何与合成其背景。
注意:尽管 <color>
值被精确定义,但它们的实际外观可能因设备而异(有时差异很大)。这是因为大多数设备未校准,并且某些浏览器不支持输出设备的颜色配置文件。
语法
/* Named colors */
rebeccapurple
aliceblue
/* RGB Hexadecimal */
#f09
#ff0099
/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)
/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)
/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)
/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)
/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)
/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)
/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)
/* Relative CSS colors */
/* HSL hue change */
hsl(from red 240deg s l)
/* HWB alpha channel change */
hwb(from green h w b / 0.5)
/* LCH lightness change */
lch(from blue calc(l + 20) c h)
/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))
可以使用以下列出的一种方法指定 <color>
值
- 通过关键字:
<named-color>
(例如blue
或pink
)、<system-color>
和currentcolor
。 - 通过十六进制表示法:
<hex-color>
(例如#ff0000
)。 - 通过
<color-function>
,使用函数表示法在颜色空间中设置参数 - 通过使用相对颜色语法,基于现有颜色输出新颜色。任何上述颜色函数都可以采用以
from
关键字开头的原始颜色,后跟新输出颜色的通道值定义。 - 通过混合两种颜色:
color-mix()
。 - 通过根据对比度比率选择颜色:
color-contrast()
。 - 通过指定两种颜色,使用第一种颜色用于浅色配色方案,第二种颜色用于深色配色方案:
light-dark()
。
currentcolor
关键字
currentcolor
关键字表示元素的 color
属性的值。这使您可以在默认情况下未接收该值的属性上使用 color
值。
如果 currentcolor
用作 color
属性的值,则它会从 color
属性的继承值中获取其值。
<div style="color: blue; border: 1px dashed currentcolor;">
The color of this text is blue.
<div style="background: currentcolor; height:9px;"></div>
This block is surrounded by a blue border.
</div>
缺少的颜色组件
任何 CSS 颜色函数(除了使用旧版逗号分隔语法之外)的每个组件都可以指定为关键字 none
以成为缺少的组件。
在颜色插值中显式指定缺失的组件对于希望插值某些颜色组件而非其他组件的情况很有用。在所有其他情况下,缺失的组件在适当的单位中将有效地具有零值:0
、0%
或0deg
。例如,以下颜色在插值之外使用时是等效的
/* These are equivalent */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);
/* These are equivalent */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);
插值
带有缺失组件的插值
在相同空间中插值颜色
当插值正好位于插值颜色空间中的颜色时,来自一种颜色的缺失组件将替换为另一种颜色中相同组件的现有值。例如,以下两个表达式是等效的
color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
注意:如果两种颜色都缺少某个组件,则该组件在插值后将缺失。
从不同空间插值颜色:类似组件
如果要插值的任何颜色不在插值颜色空间中,则其缺失的组件将根据下表中描述的相同类别的**类似组件**传输到转换后的颜色中
类别 | 类似组件 |
---|---|
红色 | R 、X |
绿色 | G 、Y |
蓝色 | B 、Z |
亮度 | L |
色彩 | C 、S |
色相 | H |
a | a |
b | b |
例如
color(xyz 0.2 0.1 0.6)
中的X
(0.2
)类似于rgb(50% 70% 30%)
中的R
(50%
)。hsl(0deg 100% 80%)
中的H
(0deg
)类似于oklch(80% 0.1 140)
中的H
(140
)。
使用Oklch作为插值颜色空间,并以下面两种颜色为例
lch(80% 30 none)
color(display-p3 0.7 0.5 none)
预处理过程为
- 用零值替换两种颜色中的缺失组件css
lch(80% 30 0) color(display-p3 0.7 0.5 0)
- 将两种颜色都转换为插值颜色空间css
oklch(83.915% 0.0902 0.28) oklch(63.612% 0.1522 78.748)
- 如果转换后的颜色的任何组件类似于相应原始颜色中缺失的组件,则将其重置为缺失组件css
oklch(83.915% 0.0902 none) oklch(63.612% 0.1522 78.748)
- 用来自另一个转换后的颜色的相同组件替换任何缺失的组件css
oklch(83.915% 0.0902 78.748) oklch(63.612% 0.1522 78.748)
无障碍访问
正式语法
<color> =
<color-base> |
currentColor |
<system-color>
<color-base> =
<hex-color> |
<color-function> |
<named-color> |
transparent
<color-function> =
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<rgb()> =
<legacy-rgb-syntax> |
<modern-rgb-syntax>
<rgba()> =
<legacy-rgba-syntax> |
<modern-rgba-syntax>
<hsl()> =
<legacy-hsl-syntax> |
<modern-hsl-syntax>
<hsla()> =
<legacy-hsla-syntax> |
<modern-hsla-syntax>
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<legacy-rgb-syntax> =
rgb( <percentage>#{3} , <alpha-value>? ) |
rgb( <number>#{3} , <alpha-value>? )
<modern-rgb-syntax> =
rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<legacy-rgba-syntax> =
rgba( <percentage>#{3} , <alpha-value>? ) |
rgba( <number>#{3} , <alpha-value>? )
<modern-rgba-syntax> =
rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<legacy-hsl-syntax> =
hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )
<modern-hsl-syntax> =
hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<legacy-hsla-syntax> =
hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )
<modern-hsla-syntax> =
hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<hue> =
<number> |
<angle>
<alpha-value> =
<number> |
<percentage>
<colorspace-params> =
<custom-params> |
<predefined-rgb-params> |
<predefined-polar-params> |
<predefined-rectangular-params> |
<xyz-params>
<custom-params> =
<dashed-ident> [ <number> | <percentage> | none ]+
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-polar-params> =
jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]
<predefined-rectangular-params> =
<predefined-rectangular> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz> [ <number> | <percentage> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
rec2100-pq |
rec2100-hlg |
rec2100-linear
<predefined-rectangular> =
jzazbz |
ictcp
<xyz> =
xyz |
xyz-d50 |
xyz-d65
示例
探索颜色值
在此示例中,我们提供了一个<div>
和一个文本输入。在输入中输入有效的颜色会导致<div>
采用该颜色,从而允许您测试我们的颜色值。
HTML
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
结果
生成完全饱和的sRGB颜色
此示例显示了sRGB颜色空间中完全饱和的sRGB颜色。
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div:nth-child(1) {
background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
background-color: hsl(330 100% 50%);
}
结果
创建不同色调的红色
此示例显示了sRGB颜色空间中不同色调的红色。
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div:nth-child(1) {
background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
background-color: hsl(0 100% 100%);
border: solid;
}
结果
创建不同饱和度的红色
此示例显示了sRGB颜色空间中不同饱和度的红色。
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div:nth-child(1) {
background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
background-color: hsl(0 100% 50%);
}
结果
规范
规范 |
---|
CSS颜色模块级别4 # 颜色语法 |
浏览器兼容性
BCD表格仅在浏览器中加载
另请参阅
opacity
:在元素级别定义透明度的属性<hue>
:表示颜色色相角的数据类型color
、background-color
、border-color
、box-shadow
、outline-color
、text-shadow
:使用<color>
的常用属性- 使用CSS将颜色应用于HTML元素
- 使用相对颜色
- CSS颜色(级别4)中的新函数、渐变和色相在MDN博客上(2023年)