CSS 函数

CSS 中的 oklab() 函数表示 oklab 颜色空间中的颜色。它代表了人眼可见的所有颜色。它与 Oklab 颜色空间上的笛卡尔坐标（即 a 轴和 b 轴）一起使用。

要添加颜色透明度，可以将可选的 alpha 分量传递给 oklab() 函数。

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

可能的值

oklab 的函数表示法() 函数为 oklab(L a b[ / A])。

  • L:可以包含任一格式，表示感知的亮度:

    • a <number>:0 到 1 之间的任意数字，其中 0 对应 0%（黑色），1 对应 100%（白色）。

    • <percentage>:0% 到 100% 之间的任何值。

    • keyword none

  • a:可以包含任一格式，指定 oklab 颜色空间中沿 a 轴的距离（显示绿色/红色的颜色）:

    • a <number>:-0.4 到 0.4 之间的任意数字。

    • <percentage>:-100% 到 100% 之间的任意值。

    • keyword none

  • b:可以包含以下格式之一: s)，指定 oklab 颜色空间中沿 b 轴的距离（显示蓝色/黄色的颜色）:

    • a <number>:-0.4 和之间的任何数字0.4.

    • <percentage>:-100% 到 100% 之间的任何值。

    • keyword none

  • A:表示颜色的透明度。它是一个可选值。

    • <alpha-value>:0 到 1 之间的任何数字，其中 1 对应于完全不透明，0 对应于完全透明。

    • keyword 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>