CSS 数据类型 - color-interpolation-method

CSS <color-interpolation-method> 数据类型确定在不同 <color> 值之间创建过渡时使用的色彩空间。此数据类型将覆盖 color-mix（） 和 linear-gradient（） 等函数的默认颜色混合。

插值颜色空间默认为 Oklab，同时对颜色值进行插值。

可能的值

<rectangular-color-space> − 可以使用关键字 srgb、srgb-linear、lab、oklab、XYZ、XYZ-D50 或 XYZ-D65。
<polar-color-space> − 可以使用关键字 shsl、hwb、lch 或 oklch。
<hue-interpolation-method> − 色调插值算法。它默认为较短的色调。它是可选的。

语法


<color-interpolation-method>: <rectangular-color-space> | <polar-color-space> | <hue-interpolation-method>;

CSS <color-interpolation-method> - linear-gradient（）

以下示例演示了使用 linear-gradient（） 的不同色彩空间和渐变插值 -


<html>
<head>
<style>
	 	.srgb-gradient {
	 	 	 background-image: linear-gradient(
	 	 	 to right,
	 	 	 rgb(15, 73, 27),
	 	 	 rgb(160, 214, 173),
	 	 	 rgb(63, 138, 13),
	 	 	 rgb(34, 180, 66),
	 	 	 rgb(79, 236, 132),
	 	 	 );
	 	}
	 	.oklab-gradient {
	 	 	 background-image: linear-gradient(
	 	 	 to right,
	 	 	 oklab(45.2% -0.032 -0.312),
	 	 	 oklab(48.7% 0.019 -0.224),
	 	 	 oklab(52.2% 0.07 -0.137),
	 	 	 oklab(55.8% 0.122 -0.049),
	 	 	 oklab(59.3% 0.173 0.038),
	 	 	 oklab(62.8% 0.225 0.126)
	 	 	 );
	 	}
	 	.oklch-longer-gradient {
	 	 	 background-image: linear-gradient(
	 	 	 to right,
	 	 	 oklch(45.2% 0.313 264),
	 	 	 oklch(46.8% 0.308 243),
	 	 	 oklch(48.4% 0.303 221),
	 	 	 oklch(50% 0.298 200),
	 	 	 oklch(51.6% 0.293 179),
	 	 	 oklch(53.2% 0.288 157),
	 	 	 oklch(54.8% 0.283 136),
	 	 	 oklch(56.4% 0.278 115),
	 	 	 oklch(58% 0.273 93),
	 	 	 oklch(59.6% 0.268 72)
	 	 	 );
	 	}
	 	.gradient {
	 	 	 height: 60px;
	 	 	 width: 50%;
	 	}
	 	.srgb-gradient {
	 	 	 background-image: linear-gradient(in srgb to right, green, yellow);
	 	}
	 	.oklab-gradient {
	 	 	 background-image: linear-gradient(in oklab to right, green, yellow);
	 	}
	 	.oklch-longer-gradient {
	 	 	 background-image: linear-gradient(in oklch longer hue to right, green, yellow);
	 	}
</style>
</head>
<body>
	 	<div>sRGB:</div>
	 	<div class="gradient srgb-gradient"></div>
	 	<div>Oklab:</div>
	 	<div class="gradient oklab-gradient"></div>
	 	<div>Oklch Gradient (with longer hue):</div>
	 	<div class="gradient oklch-longer-gradient"></div> 	
</body>
</html>

打印本页