CSS 中的 oklch（） 函数在 oklch 颜色空间中表示颜色。它使用与 oklab（） 函数相同的 L 轴，但除此之外，它使用极坐标 C （Chroma） 和 H （Hue）。
要添加颜色透明度，可以将可选的 alpha 组件传递给 oklch（） 函数。
可能的值
函数 oklch（） 的表示法是 oklch（L C H[ / A]）。
- L：可以包含以下任一格式，表示感知到的亮度：
- <number>：0 到 1 之间的任何数字，其中 0 对应于 0%（黑色），1 对应 100%（白色）。
- <percentage>：0% 到 100% 之间的任何值。
- 关键词 none
- C：可以包含指定色度度量值的格式之一，即颜色的数量。最小有用值为 0，最大值在理论上是无界的，但不超过 0.5：
- <number>：介于 0 和 0.5 之间的任何数字。
- <percentage>：介于 0% 和 100% 之间的任何值，其中 0% 对应于 0,100% 对应于 0.4。
- 关键词 none
- H：可以包含指定色相角度的任一格式：
- <number>：任意数字。
- <angle>：角度值。
- 关键词 none
- A：代表颜色的透明度。它是一个可选值。
- <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明度，0 对应于完全透明。
- 关键词 none
语法
oklch(29.2345% 0.36 24.57) | oklch(29 0.12 20deg) | oklch(29.2345% 0.4 49.0664 / 0.5);
CSS oklch（） - 值的组合
以下示例显示了 oklch（） 函数与不同值组合的用法：
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 2px solid black;
margin-bottom: 10px;
}
.oklch-chroma-100 {
background-color: oklch(50% 100% 200);
}
.oklch-light-100 {
background-color: oklch(100% 0.4 200);
}
.oklch-light-none {
background-color: oklch(none 0.29 60deg);
color: white;
}
.oklch-hue-none {
background-color: oklch(75 75% none);
}
.oklch-with-alpha {
background-color: oklch(85 0.12 75deg / 0.8);
}
</style>
</head>
<body>
<div class="oklch-chroma-100">oklch(50% 100% 200)</div>
<div class="oklch-light-100">oklch(100% 0.4 200)</div>
<div class="oklch-light-none">oklch(none 0.29 60deg)</div>
<div class="oklch-hue-none">oklch(75 75% none)</div>
<div class="oklch-with-alpha">oklch(85 0.12 75deg / 0.8)</div>
</body>
</html>
