CSS <color> 数据类型指定元素的颜色。它还可以有一个 alpha 通道透明度值，用于确定颜色如何与其背景混合。
可能的值
<named-color> − 颜色名称，例如红色、蓝色、黄色等。
<hex-color> − 表示 RGB（红、绿和蓝）值的六位十六进制代码，例如#ff0099。
RGB - RGB() 函数表示范围从 0 到 255 或百分比的红色、绿色和蓝色值，例如 rgb(0, 47, 255), rgb(50%, 10%, 100%)。
HSL - HSL() 函数表示基于色相、饱和度和亮度的颜色。例如 hsl(0, 50%, 100%)。
HWB - HWB() 函数表示基于色相、白度和黑度的颜色。例如 hwb(5 20% 0%)。
LAB - LAB() 颜色空间表示基于亮度、A 轴和 B 轴的颜色。例如 lab(50% 40 59.5)。
LCH - LCH() 颜色空间表示基于亮度、色度和色调的颜色。例如 lch(52.2% 72.2 50)。
Oklab - Oklab() 颜色空间表示基于亮度、A 轴和 B 轴的颜色。例如 oklab(59% 0.1 0.1)。
Oklch - Oklch() 颜色空间表示基于亮度、色度和色调的颜色。如oklch(60% 0.15 50)。
color-mix()函数用于组合两种不同的颜色。
light-dark() 指定两种颜色，第一种用于浅色方案，第二种用于深色方案。
语法
color = <named-color> | <hex-color> | RGB | HSL | HWB | LAB | LCH | Oklab | Oklch; CSS <color>: currentcolor 关键字
下面的示例演示了类为"box"的父元素将文本颜色设置为红色，并且边框属性使用 currentcolor 关键字，它继承了红色。
class为"box1"的子元素继承其父元素 (.box) 的颜色，即红色。添加蓝色边框和黄色背景。
<html>
<head>
<style>
.box {
color: red;
border: 3px dashed currentcolor; /* 使用当前颜色（红色）创建 3px 虚线样式的边框 */
}
.box1 {
color: currentcolor; /* 从其父级 (.box) 继承文本颜色，即红色 */
border: 5px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
文字颜色为红色。 border 属性使用 currentcolor，它从 color 属性中获取红色值。
<div class="box1">文本颜色设置为currentcolor，继承红色。 添加蓝色边框和黄色背景。</div>
</div>
</body>
</html> CSS <color>: 缺少颜色组件
您可以使用 none 关键字来表示 CSS 颜色函数中缺少的组件（旧版逗号除外） -分隔语法）。
color: oklab(50% none -0.30);相当于颜色:oklab(50% 0 -0.30);
background-color:hsl(none 50% 80%);相当于background-color: hsl(0deg 50% 80%);
<html>
<head>
<style>
div {
color: oklab(50% none -0.30);
background-color: hsl(none 50% 80%);
padding: 5px;
}
</style>
</head>
<body>
<div>color: oklab(50% none -0.30); and background-color: hsl(none 50% 80%);</div>
</body>
</html> CSS <color>: 插值
颜色插值用于渐变，过渡和动画。
在对 <color> 值进行插值时，它们会转换为指定的颜色空间，并且其组件会按照缓动函数确定的插值速度进行线性插值，缓动函数默认为 Oklab，但可以覆盖通过 <color-interpolation-method> 以特定的颜色相关函数符号表示。
CSS <color>: 在同一空间中插值颜色
在同一颜色空间内插值颜色时，在一个颜色空间中缺少组件颜色被替换为其他颜色的匹配值。以下两个表达式是相等的:
color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));
color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180)); 两个表达式在相同的最终颜色（亮度为 60%、色度为 0.2）中给出相同的结果，但色调不同:120° 和 180°。
这是一个示例 -
<html>
<head>
<style>
div {
color: color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));
}
p {
color: color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180));
}
</style>
</head>
<body>
<div>color: color-mix(in oklch, oklch(none 0.2 120), oklch(60% none 180));</div>
<p>color: color-mix(in oklch, oklch(60% 0.2 120), oklch(60% 0.2 180));</p>
</body>
</html> CSS <color>: 从不同空间插值颜色
插值颜色时，如果其中一种颜色不属于插值颜色系统，则其缺失组件根据同一类别的类似组件进行调整，如下表所示:
| 类别 | 类似组件 |
|---|---|
| 红色 | 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 作为颜色空间进行颜色插值的预处理过程:
第 1 步:用零替换缺失的分量。
lch(80% 30 0);
color(display-p3 0.7 0.5 0); 第 2 步:转换两种颜色进入 Oklch。
oklch(83.915% 0.0902 0.28);
oklch(63.612% 0.1522 78.748); 第 3 步:重置与缺失组件类似的组件。
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748) 第 4 步:用其他颜色的值替换缺失组件。
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748) 以下示例演示了如果一种颜色中缺少某个分量，则在插值期间使用另一种颜色中的相应分量 -
<html>
<head>
<style>
div {
color: oklch(83.915% 0.0902 78.748);
}
p {
color: oklch(63.612% 0.1522 78.748);
}
</style>
</head>
<body>
<div>color: oklch(83.915% 0.0902 78.748);</div>
<p>color: oklch(63.612% 0.1522 78.748);</p>
</body>
</html> CSS <color>: 颜色值测试仪
以下示例显示一个简单的网页，用户可以在文本字段中输入颜色名称。如果输入的颜色名称正确，则背景颜色改变；否则，将显示消息"无效的颜色名称" -
<html>
<head>
<style>
div {
height: 200px;
width: 200px;
margin: 10px;
}
</style>
</head>
<body>
<label for="color">Enter color name:</label>
<input type="text" id="color" />
<div></div>
<script>
const inputColor = document.querySelector("input");
const colorBox = document.querySelector("div");
function validTextColor(stringToTest) {
if (stringToTest === "inherit" || stringToTest === "transparent") {
return false;
}
const colorDiv = document.createElement("div");
colorDiv.style.color = stringToTest;
return !!colorDiv.style.color;
}
inputColor.addEventListener("input", () => {
if (validTextColor(inputColor.value)) {
colorBox.style.backgroundColor = inputColor.value;
colorBox.textContent = "";
} else {
colorBox.removeAttribute("style");
colorBox.textContent = "Invalid color name";
}
});
</script>
</body>
</html> CSS <color>: 完全饱和的 sRGB 颜色
以下示例演示 sRGB 颜色空间内完全饱和的 sRGB 颜色 -
<html>
<head>
<style>
body {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
gap: 10px;
}
div {
height: 50px;
width: 50px;
}
div:nth-child(1) {
background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
background-color: hsl(51, 86%, 60%);
}
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(150, 71%, 42%);
}
div:nth-child(6) {
background-color: hsl(109, 39%, 28%);
}
div:nth-child(7) {
background-color: hsl(182, 78%, 64%);
}
div:nth-child(8) {
background-color: hsl(270, 51%, 46%);
}
div:nth-child(9) {
background-color: hsl(300 100% 50%);
}
div:nth-child(10) {
background-color: hsl(330, 89%, 48%);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html> CSS <color>: 不同色调的红色
以下示例使用 sRGB 色彩空间演示红色的不同色调 -
<html>
<head>
<style>
body {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
gap: 10px;
}
div {
box-sizing: border-box;
height: 50px;
margin: 10px;
width: 50px;
}
div:nth-child(1) {
background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
background-color: hsl(0, 85%, 32%);
}
div:nth-child(3) {
background-color: hsl(0, 98%, 47%);
}
div:nth-child(4) {
background-color: hsl(0, 100%, 73%);
}
div:nth-child(5) {
background-color: hsl(0, 83%, 84%);
}
div:nth-child(6) {
background-color: hsl(0 100% 100%);
border: solid;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html> CSS <color>: 不同色调的红色不同的饱和度
以下示例演示了使用 sRGB 色彩空间的红色的不同饱和度 -
<html>
<head>
<style>
body {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
gap: 10px;
}
div {
box-sizing: border-box;
height: 50px;
margin: 10px;
width: 50px;
}
div:nth-child(1) {
background-color: hsl(0, 1%, 46%);
}
div:nth-child(2) {
background-color: hsl(0, 18%, 50%);
}
div:nth-child(3) {
background-color: hsl(0, 36%, 51%);
}
div:nth-child(4) {
background-color: hsl(0, 72%, 45%);
}
div:nth-child(5) {
background-color: hsl(0, 88%, 51%);
}
div:nth-child(6) {
background-color: hsl(0, 100%, 51%);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>