<color>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

<color> CSS 数据类型表示一个颜色。<color> 可以包括一个 alpha 通道透明度值,来表明颜色如何与背景色混合(composite)

备注: 尽管 <color> 被精确定义,但在不同的输出设备上仍然有可能表现不一致(有时甚至区别很大)。这是因为大多数设备不是经校准的,而且有些浏览器不支持输出设备的色彩配置(color profile)

语法

css
/* 命名颜色 */
rebeccapurple
aliceblue

/* RGB 十六进制 */
#f09
#ff0099

/* RGB(红、绿、蓝) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL(色相、饱和度、亮度) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB(色相、白度、黑度) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* LAB(亮度、A 轴、B 轴) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH(亮度、色度、色相) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab(亮度、A 轴、B 轴) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* Oklch(亮度、色度、色相) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* 相对 CSS 颜色 */
/* HSL 色相变化 */
hsl(from red 240deg s l)
/* HWB alpha 通道变化 */
hwb(from green h w b / 0.5)
/* LCH 亮度变化 */
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> 值可以使用如下方式定义:

currentcolor 关键字

currentcolor 关键字表示元素的 color 属性的值。这允许你在默认情况下不接收 color 值的属性上使用 color 值。

如果 currentcolor 用于 color 属性的值,则它将从 color 属性的继承值中获取其值。

html
<div style="color: blue; border: 1px dashed currentcolor;">
  这个文本的颜色是蓝色。
  <div style="background: currentcolor; height:9px;"></div>
  这个块的边框也是蓝色。
</div>

缺失颜色分量

每个 CSS 颜色函数的分量,除了使用旧版的逗号分隔语法的,都可以指定关键字 none 表示一个缺失的分量。

明确指定颜色插值中缺失的分量在你想要对部分颜色分量进行插值而不对其他分量进行插值的情况下非常有用。对于所有其他用途,缺失的分量在适当的单位下将有效地具有零值:00%0deg。例如,下面的颜色在不插值时是等价的:

css
/* 这两个是等价的 */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* 这两个是等价的 */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

插值

颜色插值会发生在渐变过渡动画中。

当对 <color> 值进行插值时,它们首先会转换成指定的色彩空间,然后颜色分量的计算值会进行线性插值,插值速度由过渡和动画中的缓动函数决定。插值色彩空间默认为 Oklab,但是可以在一些与颜色相关的函数标记中通过 <color-interpolation-method> 覆盖。

带有缺失分量时的插值

在同一空间内插值颜色

对完全在插值色彩空间中的颜色进行插值时,一个颜色中缺失的分量将替换为另一种颜色中同一分量的现有值。例如,以下两个表达式是等效的:

css
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))

备注: 如果两个颜色都缺失这个分量,那么这个分量在插值后也是缺失的。

在不同空间内插值:相似分量

如果任何要插值的颜色不在插值色彩空间中,则其缺失的分量将根据同一类的相似分量转换为转换后的颜色,如下表所述:

类别 相似分量
红色 RX
绿色 GY
蓝色 BZ
明度 L
色度 CS
色相 H
a a
b b

例如:

  • color(xyz 0.2 0.1 0.6) 中的 X0.2)相似于 rgb(50% 70% 30%) 中的 R50%)。
  • hsl(0deg 100% 80%) 中的 H0deg)相似于 oklch(80% 0.1 140) 中的 H140)。

使用 Oklch 作为插值色彩空间并以下面两种颜色为例:

css
lch(80% 30 none)
color(display-p3 0.7 0.5 none)

预处理过程为:

  1. 将两种颜色中缺失的分量替换为零值:

    css
    lch(80% 30 0)
    color(display-p3 0.7 0.5 0)
    
  2. 将两种颜色转换为插值色彩空间:

    css
    oklch(83.915% 0.0902 0.28)
    oklch(63.612% 0.1522 78.748)
    
  3. 如果转换后颜色的任何分量与相应原始颜色中的缺失分量相似,则将其重置为缺失的分量:

    css
    oklch(83.915% 0.0902 none)
    oklch(63.612% 0.1522 78.748)
    
  4. 将任何缺失的分量替换为另一转换后颜色中的相同分量:

    css
    oklch(83.915% 0.0902 78.748)
    oklch(63.612% 0.1522 78.748)
    

无障碍考虑

一些人分辨颜色可能会存在困难。WCAG 2.2 强烈建议不要将颜色作为传递特定消息、活动或结果的唯一方式。参见颜色和颜色对比度以了解更多信息。

形式语法

<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

html
<div></div>
<hr />
<label for="color">输入有效的颜色值:</label>
<input type="text" id="color" />

结果

生成完全饱和的 sRGB 颜色

此示例显示 sRGB 色彩空间中完全饱和的 sRGB 颜色。

HTML

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

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

html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

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

html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

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%);
}

结果

规范

Specification
CSS Color Module Level 4
# color-syntax

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<color>
color() (Profiled color values)
Mix <percentage> and <number> in parameters
Relative color() syntax
color-mix()
currentcolor keyword
hsl() (HSL color model)
Alpha parameter
Mix <percentage> and <number> in parameters
Relative HSL colors
Space-separated parameters
hwb() (HWB color model)
Mix <percentage> and <number> in parameters
Relative HWB colors
lab() (Lab color model)
Mix <percentage> and <number> in parameters
Relative Lab colors
lch() (LCH color model)
Mix <percentage> and <number> in parameters
Relative LCH colors
light-dark()
Named colors
named-color.rebeccapurple
named-color.transparent
oklab() (Oklab color model)
Mix <percentage> and <number> in parameters
Relative Oklab colors
oklch() (OKLCH color model)
Mix <percentage> and <number> in parameters
Relative Oklch colors
rgb() (RGB color model)
Alpha parameter
Float values in parameters
Mix <percentage> and <number> in parameters
Relative RGB colors
Space-separated rgb() parameters
RGB hexadecimal notation (#RRGGBB, #RGB, …)
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)
System colors
AccentColor and AccentColorText
Mark, MarkText, ButtonBorder
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

参见