Oklab颜色空间演示
<style>.ma > p { margin: 12px 0; }
.ma mark { padding: 0 6px; background: lightblue; }
.stage { margin: auto; width: 500px; }
.tbox { width: 400px; height: 200px; background: oklab(0% -100% -100% / 50%); border: 1px solid gray; border-radius: 8px; overflow: hidden; position: relative; }
.tMid { text-align: center; }
</style>
<div class="ma">
<h2 class="tMid">Oklab颜色空间演示</h2>
<div class="stage">
<div class="tbox"></div>
<p>颜色信息：</p>
<blockquote>
<p id="colorMsg">百分比：oklab(0% -100% -100% / 50%)<br>浮点数：</p>
</blockquote>
<p>
<label for="lab1">明度比例</label>
<input id="lab1" class="lab" type="range" max="100" min="0" value="0" />
<output class="oplab">0</output>
</p>
<p>
<label for="lab2">绿红比例</label>
<input id="lab2" class="lab" type="range" max="100" min="-100" value="-100" />
<output class="oplab">-100%</output>
</p>
<p>
<label for="lab3">蓝黄比例</label>
<input id="lab3" class="lab" type="range" max="100" min="-100" value="-100" />
<output class="oplab">-100%</output>
</p>
<p>
<label for="lab4">不透明度</label>
<input id="lab4" class="lab" type="range" max="100" min="0" value="50" />
<output class="oplab">50%</output>
</p>
</div>
<h3>说明</h3>
<p>Oklab颜色模型的推出旨在以模仿人眼感知颜色的方式构造颜色，其色彩空间比标准RGB（sRGB）更为宽广，可以渲染广色域、P3颜色等。该颜色空间使用 l 模拟感知明度，使用直角坐标系 a 轴 和 b 轴分别模拟绿或红、蓝或黄，支持 A 通道。</p>
<p>oklab() 颜色函数语法：<mark>oklab(l a b [/ A]);</mark>。l 表示明亮度，取值范围 0~1 或 0%~1100%；a 表示 a 轴数值，绿或红，取值范围 -0.4~0.4 或 -100%~100%；b 表示 b 轴上的数值，蓝或黄，取值范围与 a 同；A 表示不透明度，需要用正斜杠 <mark>/</mark> 与前面的 lab 参数隔开，取值范围 0~1 或 0%~100%。</p>
<p>各大新版本现代浏览器已经全面支持 oklab() 颜色函数，最低版本要求：Chromium 111、Firefox 113、Opera 98、Safari 15.4</p>
</div>
<script>
(function() {
const outputs = document.querySelectorAll('.oplab'),
labs = document.querySelectorAll('.lab'),
tbox = document.querySelector('.tbox');
labs.forEach((lab,key) => {
lab.oninput = () => {
let color = `oklab(${labs.value}% ${labs.value}% ${labs.value}% / ${labs.value}%)`;
outputs.value = `${lab.value}%`;
tbox.style.background = color;
colorMsg.innerHTML = `百分比：${color}<br>浮点数：${window.getComputedStyle(tbox).backgroundColor}`;
};
});
colorMsg.innerHTML += window.getComputedStyle(tbox).backgroundColor;
})();
</script>
又是一种颜色表示啊。
这个很奇特，我只调明度比例一项，感觉颜色也发生变化呢{:4_204:} 这个区间范围更大，意味着可以调整得更细致吧{:4_187:} 坐在这玩了好半天，发现了好多喜欢的中间色{:4_199:} 红影 发表于 2024-6-2 09:44
又是一种颜色表示啊。
这个很奇特，我只调明度比例一项，感觉颜色也发生变化呢
这是自然的。颜色在不同的光照之下所呈现的形态是不一样的 红影 发表于 2024-6-2 09:46
这个区间范围更大，意味着可以调整得更细致吧
这个现在是候选色彩空间，既然已得到现在浏览器的支持，估计将来会转正。
oklab 还有一个兄弟 oklch，使用卡迪尔坐标系，我还没有去了解它 马黑黑 发表于 2024-6-2 09:50
这是自然的。颜色在不同的光照之下所呈现的形态是不一样的
在取不透明度50%的时候，怀疑会受到论坛底色影响，特地复制一下拿出来试验，果然不同呢{:4_204:} 红影 发表于 2024-6-2 09:47
坐在这玩了好半天，发现了好多喜欢的中间色
是的，有些颜色 rgb、hsl 调不出来的，它都可以 这个也是常用的颜色配置方式么，对这个很陌生呢。 马黑黑 发表于 2024-6-2 09:54
这个现在是候选色彩空间，既然已得到现在浏览器的支持，估计将来会转正。
oklab 还有一个兄弟 oklch， ...
看到这个卡迪尔坐标系几个字，咋那么习惯叫它笛卡尔坐标系啊{:4_173:} 红影 发表于 2024-6-2 09:55
这个也是常用的颜色配置方式么，对这个很陌生呢。
这个是w3c推出的比较新的颜色表达方案，属于 CSS Color Module Level 4 的多个色彩空间中的一个，浏览器也是最近才陆续支持的 马黑黑 发表于 2024-6-2 09:55
是的，有些颜色 rgb、hsl 调不出来的，它都可以
这个感觉特别有用，忍不住又置顶了一下，下回想找特殊的颜色可以用这个了。
只是找到后怎样跟rgb、hsl 的颜色对应啊{:4_173:} 红影 发表于 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这个色彩象是更加柔和那一系列。。{:4_199:}
oklab(0 -0.4 -0.4 / 0.5)
这一串如果突然出现，还不知道它表示颜色。。
又学到新的知识点了。。 这样能够演示变化的小工具，真是太直观了。
跟着老师认识新的色彩世界。。{:4_187:} 南无月 发表于 2024-6-2 12:05
这样能够演示变化的小工具，真是太直观了。
跟着老师认识新的色彩世界。。
{:4_190:}