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

CSS 函数 - oklab()

CSS 中的 oklab（） 函数在 oklab 颜色空间中表达一种颜色。它代表人眼可见的所有颜色。它适用于 Oklab 颜色空间上的笛卡尔坐标，即 a 轴和 b 轴。

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

为了使用极坐标系统，对于色度和色调，您可以使用 oklch（） 函数。

可能的值

oklab（） 函数的函数表示法是 oklab（L a b[ / A]）。

  • L：可以包含以下任一格式，表示感知到的亮度：
    • <number>：0 到 1 之间的任何数字，其中 0 对应于 0%（黑色），1 对应 100%（白色）。
    • <percentage>：0% 到 100% 之间的任何值。
    • 关键词 none
  • A：可以包含以下任一格式，该格式指定了Oklab颜色空间中沿A轴的距离（显示绿色/红色的程度）：
    • <number>：介于 -0.4 和 0.4 之间的任何数字。
    • <percentage>：介于 -100% 和 100% 之间的任何值。
    • 关键词 none
  • B：可以包含以下任一格式，指定 Oklab 颜色空间中沿 B 轴的距离（显示蓝色/黄色的程度）：
    • <number>：介于 -0.4 和 0.4 之间的任何数字。
    • <percentage>：介于 -100% 和 100% 之间的任何值。
    • 关键词 none
  • A：代表颜色的透明度。它是一个可选值。
    • <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明度，0 对应于完全透明。
    • 关键词 none

语法

oklab(29.2345% 0.3825 20.0664%) | oklab(1 39.3825% 20.0664%) | oklab(29.2345% -0.23 20.0664% / 0.5);

CSS oklab（） - 值的组合

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

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

	 	.oklab-light-100 {
	 	 	 background-color: oklab(100% 0.4 85%);
	 	}	

	 	.oklab-light-none {
	 	 	 background-color: oklab(none 0.29 0.34);
	 	 	 color: white;
	 	}

	 	.oklab-b-none {
	 	 	 background-color: oklab(.75 75% none);
	 	}

	 	.oklab-with-alpha {
	 	 	 background-color: oklab(1 0.12 75% / 0.8);
	 	}
</style>
</head>
<body>
	 	<div class="oklab-light-50">oklab(50% -100% 0.4)</div>
	 	<div class="oklab-light-100">oklab(100% 0.4 85%)</div>
	 	<div class="oklab-light-none">oklab(none 0.29 0.34)</div>
	 	<div class="oklab-b-none">oklab(0.75 75% none)</div>
	 	<div class="oklab-with-alpha">oklab(1 0.12 75% / 0.8)</div>
</body>
</html>
<< CSS 媒体特性 - color-gamut CSS 函数 - lab() >>