CSS `Oklab` / `Oklch` 颜色空间在现代设计中的优势与应用

各位观众老爷，大家好！我是今天的主讲人，准备好迎接一场色彩革命了吗？今天要跟大家聊聊 CSS 中新晋的色彩网红——Oklab 和 Oklch。别害怕，虽然名字听起来像外星语，但它们绝对能让你的设计更上一层楼！

开场白：颜色的烦恼，你懂的！

咱们先来回顾一下老朋友们：HEX、RGB、HSL。它们陪伴我们走过了无数个日夜，构建了一个又一个网站。但说实话，用起来总感觉差点意思。

HEX: 简单粗暴，但人脑很难直接理解，调色基本靠瞎蒙。
RGB: 稍微好点，但调整亮度或饱和度的时候，颜色感觉就变了，简直是灵魂拷问！
HSL: 相对直观，但仍然存在感知均匀性的问题，同样的亮度变化，不同颜色给人的感觉差异很大。

这些颜色模型都有一个共同的缺点：它们不是 感知均匀 的。这意味着，在这些颜色空间中，数值上的等量变化，在人眼看来并不一定是等量的变化。举个例子，在 HSL 中，改变亮度值 20%，绿色可能看起来变化很大，但蓝色可能变化很小。这给设计师带来了很大的困扰，尤其是在需要创建一致的色彩梯度或调整颜色主题时。

隆重登场：Oklab 和 Oklch，色彩界的救星！

终于，我们的主角登场了！Oklab 和 Oklch 都是基于 CIELAB 颜色空间的，CIELAB 是一种旨在接近人类视觉感知的颜色空间。Oklab 是 CIELAB 的一个改进版本，由 Björn Ottosson 提出，目标是提供更好的感知均匀性。

Oklab 的三维坐标：

L (Lightness): 亮度，范围是 0 到 1 (0% 到 100%)，0 是纯黑，1 是纯白。
a: 绿色到红色的分量，负值表示绿色，正值表示红色。
b: 蓝色到黄色的分量，负值表示蓝色，正值表示黄色。

Oklch 的三维坐标：

L (Lightness): 亮度，和 Oklab 一样。
c (Chroma): 色度，表示颜色的鲜艳程度，范围取决于 L 的值。
h (Hue): 色相，表示颜色的种类（红、绿、蓝等），用角度表示，范围是 0 到 360 度。

Oklab 和 Oklch 的优势：

感知均匀性： 这是它们最大的优势！数值上的等量变化，在人眼看来也是等量的变化。这意味着，你可以更轻松地创建一致的色彩梯度、调整颜色主题，而不用担心颜色感知上的偏差。
更自然的色彩混合： 使用 Oklab/Oklch 进行颜色混合，可以得到更自然、更符合人眼感知的效果。比如，在制作渐变时，可以避免出现中间色偏暗或偏灰的情况。
更容易理解和控制： 虽然坐标系看起来有点抽象，但习惯之后，你会发现它比 HSL 更容易理解。例如，调整色度 (Chroma) 可以直接控制颜色的鲜艳程度，而不会影响亮度或色相。

代码示例：Oklab 和 Oklch 在 CSS 中的应用

说了这么多，让我们来看看如何在 CSS 中使用 Oklab 和 Oklch。

/* 使用 Oklab 定义颜色 */
.oklab-example {
  background-color: oklab(0.62, 0.13, -0.09); /* 一个有点偏粉的紫色 */
  color: oklab(0.95, -0.05, 0.08); /* 一个浅米色 */
}

/* 使用 Oklch 定义颜色 */
.oklch-example {
  background-color: oklch(60%, 0.2, 120); /* 一个鲜艳的绿色 */
  color: oklch(90%, 0.1, 30); /* 一个柔和的橙色 */
}

/* 创建 Oklab 渐变 */
.oklab-gradient {
  background: linear-gradient(to right, oklab(0.5, 0.1, 0.05), oklab(0.5, -0.1, -0.05));
}

/* 创建 Oklch 渐变 */
.oklch-gradient {
  background: linear-gradient(to right, oklch(50%, 0.2, 0), oklch(50%, 0.2, 180));
}

/* 使用 CSS 变量和 calc() 函数，动态调整 Oklch 颜色 */
:root {
  --base-hue: 240; /* 基础色相（蓝色） */
  --saturation: 0.3; /* 饱和度 */
  --lightness: 60%; /* 亮度 */
}

.dynamic-color {
  background-color: oklch(var(--lightness), var(--saturation), var(--base-hue));
  color: oklch(calc(var(--lightness) + 30%), calc(var(--saturation) - 0.1), calc(var(--base-hue) + 180)); /* 互补色 */
}

实用技巧：Oklab/Oklch 的正确打开方式

在线调色工具： 不要试图直接用脑子计算 Oklab/Oklch 的值！善用在线调色工具，例如：
- Oklab Color Picker
- CSS Color Module Level 4 (在支持的浏览器中，可以直接在开发者工具中调整)
- [Various online color palette generators](https://coolors.co/, https://paletton.com/) (check if they support the color model)

CSS 预处理器： 如果你使用了 Sass、Less 等 CSS 预处理器，可以编写更简洁、更易于维护的 Oklab/Oklch 代码。

// Sass 示例
@function oklch-color($lightness, $chroma, $hue) {
  @return oklch($lightness, $chroma, $hue);
}

.fancy-button {
  background-color: oklch-color(70%, 0.25, 210);
  color: white;
  &:hover {
    background-color: oklch-color(60%, 0.3, 230);
  }
}

颜色主题生成器： 利用 Oklab/Oklch 的感知均匀性，可以更轻松地生成和谐的颜色主题。一些颜色主题生成器已经支持 Oklab/Oklch，或者你可以自己编写脚本来实现。

Oklab/Oklch 的应用场景：

创建一致的色彩梯度： 这是 Oklab/Oklch 最擅长的领域。使用 Oklab/Oklch 可以避免渐变出现中间色偏暗或偏灰的情况，得到更自然、更平滑的过渡效果。
调整颜色主题： 在调整颜色主题时，使用 Oklab/Oklch 可以更精确地控制颜色的亮度、饱和度，而不会影响颜色的整体感觉。
数据可视化： 在数据可视化中，使用 Oklab/Oklch 可以创建更易于区分、更符合人眼感知的颜色映射。
无障碍设计： Oklab/Oklch 的感知均匀性，有助于创建更易于阅读、更易于理解的界面，从而提升网站的可访问性。例如，可以使用 Oklab/Oklch 来确保文本和背景之间的对比度足够高，以满足 WCAG 的要求。

兼容性问题：

虽然 Oklab/Oklch 很棒，但目前浏览器的兼容性还不是很好。截至到我写这篇文章的时候，主流浏览器对 Oklab/Oklch 的支持情况如下（请自行查询最新的兼容性数据）：

Chrome: 较好
Firefox: 较好
Safari: 较好
Edge: 较好
IE: 不支持 (RIP)

解决方案：

渐进增强： 对于不支持 Oklab/Oklch 的浏览器，可以使用传统的颜色模型 (HEX、RGB、HSL) 作为备选方案。

.my-element {
  background-color: rgb(150, 75, 0); /* 备选颜色 */
  background-color: oklch(50%, 0.6, 45); /* 支持 Oklch 的浏览器会使用这个颜色 */
}

CSS 预处理器： 使用 CSS 预处理器可以自动生成备选颜色。

// Sass 示例
@function oklch-to-rgb($lightness, $chroma, $hue) {
  // 这里需要一个将 Oklch 转换为 RGB 的函数，你可以自己实现，或者使用现有的库
  // 这只是一个占位符，你需要替换成真正的转换代码
  @return rgb(0, 0, 0);
}

.my-element {
  background-color: oklch-to-rgb(50%, 0.6, 45); /* 备选颜色 */
  background-color: oklch(50%, 0.6, 45); /* 支持 Oklch 的浏览器会使用这个颜色 */
}

JavaScript polyfill： 可以使用 JavaScript polyfill 来模拟 Oklab/Oklch 的支持。但这可能会影响性能，所以要谨慎使用。

Oklab 和 Oklch vs 其他颜色空间：一个简单的对比

特性	Oklab/Oklch	HSL	RGB/HEX
感知均匀性	优秀，数值变化对应人眼感知的均匀变化	较差，相同的亮度变化在不同颜色上感知差异大	差，亮度/色相调整难以预测
直观性	相对直观，L 表示亮度，c 表示色度，h 表示色相	较直观，H 表示色相，S 表示饱和度，L 表示亮度	较差，难以直接理解颜色的构成
色彩混合	自然，避免中间色偏暗或偏灰	一般，可能出现非预期的颜色	差，颜色混合结果难以预测
应用场景	色彩梯度、颜色主题、数据可视化、无障碍设计	颜色主题、简单调色	简单颜色定义
兼容性	逐渐提升，但仍需考虑备选方案	良好	良好
文件大小	相对较大（需要转换或 polyfill）	相对较小	较小

结论：拥抱色彩的未来！

Oklab 和 Oklch 代表了色彩的未来。虽然目前还存在一些兼容性问题，但它们的优势是显而易见的。随着浏览器的不断更新，相信 Oklab 和 Oklch 会越来越普及，成为前端开发者的必备技能。

所以，各位观众老爷，不要犹豫了，赶紧拥抱 Oklab 和 Oklch，让你的设计更加出色吧！

最后的啰嗦：

颜色是一个非常主观的东西，每个人对颜色的感知都可能有所不同。Oklab 和 Oklch 只是提供了一种更科学、更客观的颜色模型，但最终的设计效果还是要靠设计师的经验和审美来决定。多尝试、多实践，才能真正掌握 Oklab 和 Oklch 的精髓。

好了，今天的讲座就到这里。感谢大家的观看！希望下次有机会再跟大家分享更多的技术干货。记得点赞、收藏、转发哦！

发表回复 取消回复

发表回复取消回复