1. 首页
  2. CSS 菜鸟教程
  3. CSS 函数 - oklch()

CSS 函数 - oklch()

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>
<< CSS 函数 - lab() CSS 函数 - lch() >>