<color>

语法

/* 命名颜色 */
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> 值可以使用如下方式定义：

• 通过关键字：<named-color>（例如 blue 或 pink）、<system-color> 和 currentcolor。
• 通过十六进制标记：<hex-color>（例如 #ff0000）。
• 通过 <color-function>，在色彩空间中使用带参数的函数标记：
  • sRGB 色彩空间：hsl()、hwb() 和 rgb()。
  • CIELAB 色彩空间：lab() 和 lch()。
  • Oklab 色彩空间：oklab() 和 oklch()。
  • 其他色彩空间：color()。
• 通过使用相对颜色语法基于现有颜色输出一个新的颜色。上述任何颜色函数都可以接受由 from 关键字引导并后跟新输出颜色的通道值定义的原始颜色。
• 通过混合两个颜色：color-mix()。
• 通过指定两个颜色，第一个用于浅色模式，第二个用于深色模式：light-dark()。

currentcolor 关键字

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

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

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

缺失颜色分量

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

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

/* 这两个是等价的 */
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> 覆盖。

带有缺失分量时的插值

在同一空间内插值颜色

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

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

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

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

例如：

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

预处理过程为：

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>      |
  <contrast-color()>  |
  <device-cmyk()>     |
  <light-dark()>      

<color-base> = 
  <hex-color>       |
  <color-function>  |
  <named-color>     |
  <color-mix()>     |
  transparent       

<contrast-color()> = 
  contrast-color( [ [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast>? ] | [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast> , <color># ] ] )  

<device-cmyk()> = 
  <legacy-device-cmyk-syntax>  |
  <modern-device-cmyk-syntax>  

<light-dark()> = 
  light-dark( <color> , <color> )  

<color-function> = 
  <rgb()>     |
  <rgba()>    |
  <hsl()>     |
  <hsla()>    |
  <hwb()>     |
  <lab()>     |
  <lch()>     |
  <oklab()>   |
  <oklch()>   |
  <ictcp()>   |
  <jzazbz()>  |
  <jzczhz()>  |
  <alpha()>   |
  <color()>   

<color-mix()> = 
  color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )  

<target-contrast> = 
  <wcag2>  

<legacy-device-cmyk-syntax> = 
  device-cmyk( <number>#{4} )  

<modern-device-cmyk-syntax> = 
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )  

<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( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<ictcp()> = 
  ictcp( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzazbz()> = 
  jzazbz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzczhz()> = 
  jzczhz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha()> = 
  alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<wcag2> = 
  wcag2                                           |
  wcag2( [ <number> | [ aa | aaa ] && large? ] )  

<cmyk-component> = 
  <number>      |
  <percentage>  |
  none          

<alpha-value> = 
  <number>      |
  <percentage>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsla-syntax> = 
  hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<colorspace-params> = 
  <custom-params>          |
  <predefined-rgb-params>  |
  <xyz-params>             

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<predefined-rgb> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  rec2100-pq         |
  rec2100-hlg        |
  rec2100-linear     

示例

探索颜色值

在这个例子中，我们提供了一个 <div> 和一个文本输入框。往文本框内输入有效的颜色会使 <div> 采用这个颜色，从而允许你测试我们的颜色值。

HTML

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

div {
  height: 200px;
  width: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "无效的颜色值";
  }
});

结果

生成完全饱和的 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

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

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

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}

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

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

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

结果

规范

浏览器兼容性

参见

• opacity：在元素级别上设备透明度的属性
• <hue>：表示一个颜色的色相角度的数据类型
• color、background-color、border-color、box-shadow、outline-color、text-shadow：使用 <color> 的常见属性
• 使用 CSS 给 HTML 元素应用颜色
• 使用相对颜色
• MDN 博客中的文章 CSS 颜色（第 4 版）中的新功能、渐变和色调（2023 年）