CSS 数据类型 - color

上一页
下一页

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”的父元素将文本颜色设置为红色，而 border 属性使用 currentcolor 关键字，该关键字继承红色。

类为“box1”的子元素继承了其父元素 （.box） 的颜色，即红色。添加蓝色边框和黄色背景。


<html>
<head>
<style>
	 	.box {
	 	 	 color: red;
	 	 	 border: 3px dashed currentcolor; 	 /* Create a border with 3px dashed style using the currentcolor (red). */
	 	}
	 	.box1 {
	 	 	 color: currentcolor; 	 	 	 /* Inherit the text color from its parent (.box), which is red. */
	 	 	 border: 5px solid blue;
	 	 	 background-color: yellow;	
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 The text color is red. The border property uses currentcolor, which takes the value red from the color property.
	 	 	 <div class="box1">The text color set to currentcolor, which inherits the red color. Add a blue border and a yellow background.</div>
	 	</div>
</body>
</html>

CSS <color> - 缺少颜色组件

您可以使用 none 关键字来表示 CSS 颜色函数中缺少的组件（传统的逗号分隔语法除外）。

  • 颜色： OKLAB（50% 无 -0.30）;相当于颜色：oklab（50% 0 -0.30）;
  • 背景颜色：HSL（无 50% 80%）;相当于背景色：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> - 从不同的空间插值颜色

插值颜色时，如果其中一种颜色不属于插值颜色系统，则会根据同一类别中的相似分量调整其缺失的分量，如下表所示：

类别 类似组件
Reds R, X
Greens G, Y
Blues B, Z
Lightness L
Colorfulness C, S
Hue H
a a
b b

例如

  • 颜色 （xyz， 0.2， 0.1， 0.6） 对应于 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>
打印本页
上一页
下一页