Oklab颜色空间演示

马黑黑

Oklab颜色空间演示

颜色信息：

百分比：oklab(0% -100% -100% / 50%)
浮点数：

明度比例

0

绿红比例

-100%

蓝黄比例

-100%

不透明度

50%

说明

Oklab颜色模型的推出旨在以模仿人眼感知颜色的方式构造颜色，其色彩空间比标准RGB（sRGB）更为宽广，可以渲染广色域、P3颜色等。该颜色空间使用 l 模拟感知明度，使用直角坐标系 a 轴 和 b 轴分别模拟绿或红、蓝或黄，支持 A 通道。

oklab() 颜色函数语法：oklab(l a b [/ A]);。l 表示明亮度，取值范围 0~1 或 0%~1100%；a 表示 a 轴数值，绿或红，取值范围 -0.4~0.4 或 -100%~100%；b 表示 b 轴上的数值，蓝或黄，取值范围与 a 同；A 表示不透明度，需要用正斜杠 / 与前面的 lab 参数隔开，取值范围 0~1 或 0%~100%。

各大新版本现代浏览器已经全面支持 oklab() 颜色函数，最低版本要求：Chromium 111、Firefox 113、Opera 98、Safari 15.4

红影

又是一种颜色表示啊。
这个很奇特，我只调明度比例一项，感觉颜色也发生变化呢

红影

这个区间范围更大，意味着可以调整得更细致吧

红影

坐在这玩了好半天，发现了好多喜欢的中间色

马黑黑

红影 发表于 2024-6-2 09:44
又是一种颜色表示啊。
这个很奇特，我只调明度比例一项，感觉颜色也发生变化呢

这是自然的。颜色在不同的光照之下所呈现的形态是不一样的

马黑黑

红影 发表于 2024-6-2 09:46
这个区间范围更大，意味着可以调整得更细致吧

这个现在是候选色彩空间，既然已得到现在浏览器的支持，估计将来会转正。

oklab 还有一个兄弟 oklch，使用卡迪尔坐标系，我还没有去了解它

红影

马黑黑 发表于 2024-6-2 09:50
这是自然的。颜色在不同的光照之下所呈现的形态是不一样的

在取不透明度50%的时候，怀疑会受到论坛底色影响，特地复制一下拿出来试验，果然不同呢

马黑黑

红影 发表于 2024-6-2 09:47
坐在这玩了好半天，发现了好多喜欢的中间色

是的，有些颜色 rgb、hsl 调不出来的，它都可以

红影

这个也是常用的颜色配置方式么，对这个很陌生呢。

红影

马黑黑 发表于 2024-6-2 09:54
这个现在是候选色彩空间，既然已得到现在浏览器的支持，估计将来会转正。

oklab 还有一个兄弟 oklch， ...

看到这个卡迪尔坐标系几个字，咋那么习惯叫它笛卡尔坐标系啊

马黑黑

红影 发表于 2024-6-2 09:55
这个也是常用的颜色配置方式么，对这个很陌生呢。

这个是w3c推出的比较新的颜色表达方案，属于 CSS Color Module Level 4 的多个色彩空间中的一个，浏览器也是最近才陆续支持的

红影

马黑黑 发表于 2024-6-2 09:55
是的，有些颜色 rgb、hsl 调不出来的，它都可以

这个感觉特别有用，忍不住又置顶了一下，下回想找特殊的颜色可以用这个了。
只是找到后怎样跟rgb、hsl 的颜色对应啊

马黑黑

红影 发表于 2024-6-2 09:57
看到这个卡迪尔坐标系几个字，咋那么习惯叫它笛卡尔坐标系啊

这是翻译问题，之前提到过。英文：Cartesian coordinates，法语：les coordonnées cartésiennes

红影

马黑黑 发表于 2024-6-2 09:58
这个是w3c推出的比较新的颜色表达方案，属于 CSS Color Module Level 4 的多个色彩空间中的一个，浏览器 ...

这个颜色调节特别细腻，只是还没习惯它的颜色调整的规律。

马黑黑

红影 发表于 2024-6-2 09:59
这个感觉特别有用，忍不住又置顶了一下，下回想找特殊的颜色可以用这个了。
只是找到后怎样跟rgb、hsl  ...

你可以直接使用 oklab 函数表示。另外，得出结果后，可以用取色器取色，会有十六进制、rgb乃至hsl等多种结果提供给你

马黑黑

红影 发表于 2024-6-2 10:01
这个颜色调节特别细腻，只是还没习惯它的颜色调整的规律。

这个需要慢慢体会。应先关闭A通道，即不透明度调到最大，然后调整各个参数，一一体会。

马黑黑

红影 发表于 2024-6-2 09:54
在取不透明度50%的时候，怀疑会受到论坛底色影响，特地复制一下拿出来试验，果然不同呢

所以，颜色的渲染，最好放在白色底下展现

南无月

lab这个色彩象是更加柔和那一系列。。
oklab(0 -0.4 -0.4 / 0.5)
这一串如果突然出现，还不知道它表示颜色。。
又学到新的知识点了。。

南无月

这样能够演示变化的小工具，真是太直观了。
跟着老师认识新的色彩世界。。

马黑黑

南无月 发表于 2024-6-2 12:05
这样能够演示变化的小工具，真是太直观了。
跟着老师认识新的色彩世界。。