CSS 函数 - lch（）

CSS 中的 lch（） 函数在 LCH 颜色空间中表示颜色。使用与 lab（） 函数相同的 L 轴，但除此之外，它使用极坐标 C （色度）和 H （色相）。

要添加颜色透明度，可以将可选的 alpha 组件传递给 lch（） 函数。

可能的值

lch（） 函数的函数表示法是 lch（L C H[ / A]）。

L：可以包含代表 CIE 亮度的任一格式：
- <number>：0 到 100 之间的任何数字，其中 0 对应于 0%（黑色），100 对应 100%（白色）。
- <percentage>：0% 到 100% 之间的任何值。
- 关键词 none
C：可以包含指定色度度量值的格式之一，即颜色的数量。最小有用值为 0，最大值在理论上是无界的，但不超过 230：
- <number>：0 到 150 之间的任何数字。
- <percentage>：0% 到 100% 之间的任何值，其中 100% 等于 150。
- 关键词 none
H：可以包含指定色相角度的任一格式：
- <number>：任意数字。
- <angle>：角度值。
- 关键词 none
A：代表颜色的透明度。它是一个可选值。
- <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明度，0 对应于完全透明。
- 关键词 none

在 lch（）函数的情况下，值 100% 等于 L 值的数字 100 和 C 值的数字 150。

语法


lch(29.2345% 39.3825 20) | lch(29 39.3825% 20deg) | lch(29.2345% 39.3825 20.0664 / 0.5);

CSS lch（） - 值的组合

以下示例显示了 lch（）函数与不同值组合的用法：


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	
	 	.lch-chroma-100 {
	 	 	 background-color: lch(50% 100% 200);
	 	}	

	 	.lch-light-100 {
	 	 	 background-color: lch(100% 50 200);
	 	}	

	 	.lch-light-none {
	 	 	 background-color: lch(none 130 20);
	 	 	 color: white;
	 	}

	 	.lch-hue-none {
	 	 	 background-color: lch(75 75% none);
	 	}

	 	.lch-with-alpha {
	 	 	 background-color: lch(85 120 75deg / 0.4);
	 	}
</style>
</head>
<body>
	 	<div class="lch-chroma-100">lch(50% 100% 200)</div>
	 	<div class="lch-light-100">lch(100% 50 200)</div>
	 	<div class="lch-light-none">lch(none 130 20)</div>
	 	<div class="lch-hue-none">lch(75 75% none)</div>
	 	<div class="lch-with-alpha">lch(85 120 75deg / 0.4)</div>
</body>
</html>

本页