CSS 函数 - color()_CSS 菜鸟教程

CSS 中的 color（） 函数允许使用可以在特定颜色空间中指定的颜色，而不是大多数颜色函数使用的默认 sRGB 颜色空间。

色域CSS 媒体功能可用于检查对特定颜色空间的支持。

可能的值

color（） 函数表示法是 color（colorspace c1 c2 c3[ / A]）。

ColorSpace：它是一个 <ident>（字符串），表示 colorspaces 的名称：
- a srgb
- a srgb-linear
- a display-p3
- a a98-rgb
- a prophoto-rgb
- a rec2020
- a xyz
- a xyz-d50
- a xyz-d65
C1、C2、C3：可以包含表示 ColorSpace 中的组件值的任一格式：
- a <number>：介于 0 和 1 之间的任何值。
- A <percentage>：0% 到 100% 之间的任何值。
- 关键词 none
A：代表颜色的透明度。它是一个可选值。
- <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明度，0 对应于完全透明。
- 关键词 none

语法


color(display-p3 0.45 1 0) | color(display-p3 0.45 1 0 / 0.4)

CSS color（） - 使用预定义的颜色空间

以下示例显示了将预定义的颜色空间与 color（）函数一起使用，具有不同的亮度、a 轴和 b 轴值：


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	
	 	.color-srgb {
	 	 	 background-color: color(srgb 1 0 0);
	 	} 	

	 	.color-srgb-linear {
	 	 	 background-color: color(srgb-linear 0 1 0);
	 	} 	

	 	.color-display-p3 {
	 	 	 background-color: color(display-p3 0.4 0.6 35%);
	 	} 	

	 	.color-a98-rgb {
	 	 	 background-color: color(a98-rgb 1 1 0);
	 	} 	

	 	.color-prophoto-rgb {
	 	 	 background-color: color(prophoto-rgb 0 0 1);
	 	 	 color: white ;
	 	}

	 	.color-rec2020 {
	 	 	 background-color: color(rec2020 0.6 0.1 1 / 0.4);
	 	}
</style>
</head>
<body>
	 	<div class="color-srgb">color(srgb 1 0 0)</div>
	 	<div class="color-srgb-linear">color(srgb-linear 0 1 0)</div>
	 	<div class="color-display-p3">color(display-p3 0.4 0.6 35%)</div>
	 	<div class="color-a98-rgb">color(a98-rgb 1 1 0)</div>
	 	<div class="color-prophoto-rgb">color(prophoto-rgb 0 0 1)</div>
	 	<div class="color-rec2020">color(rec2020 0.6 0.1 1 / 0.4)</div>
</body>
</html>

CSS color（） - 使用 xyz 颜色空间

以下示例显示了 xyz colorspaces 与 color（）函数的用法，该函数具有不同的亮度、a 轴和 b 轴值：


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	
	 	.color-xyz {
	 	 	 background-color: color(xyz 1 0 0);
	 	} 	

	 	.color-xyz-d50 {
	 	 	 background-color: color(xyz-d50 1 1 0);
	 	} 	

	 	.color-xyz-d65 {
	 	 	 background-color: color(xyz-d65 1 0 75% / 0.3);
	 	} 	
</style>
</head>
<body>
	 	<div class="color-xyz">color(xyz 1 0 0)</div>
	 	<div class="color-xyz-d50">color(xyz-d50 1 1 0)</div>
	 	<div class="color-xyz-d65">color(xyz-d65 1 0 75% / 0.3)</div>
</body>
</html>

<< CSS 函数 - color-mix() CSS 媒体特性 - color-gamut >>