[博客翻译]CSS中的Oklch：为什么我们从RGB和HSL转移（2024）

由 发布于 OKLCHCSS颜色设计可读性
 收藏

原文地址：https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl


CSS颜色模块的最新更新带来了全新的颜色定义方式——OKLCH。这篇文章将向您介绍为何我们选择从传统的RGB和HSL转向这种新方法。

简介

最新的CSS Color 4标准引入了一种新的颜色表示方法oklch()，这种方法对于设计系统和调色板尤为重要。接下来我们将探讨为什么这项技术能够显著改善您的网站设计。

超简版

oklch() 是一种新的定义CSS颜色的方式，在oklch(L C H) 或 oklch(L C H / a)中，各参数的具体含义如下：

  • L: 感知亮度，范围为0%到100%。
  • C: 彩度，从灰色到最饱和的颜色。
  • H: 色相角，范围是0到360。
  • a: 透明度，范围为0到1或者0到100%。

示例代码如下：

a:hover {
    background: oklch(0.45 0.26 264); /* 蓝色 */
    color: oklch(1 0 0); /* 白色 */
    color: oklch(0 0 0 / 50%); /* 半透明黑色 */
}

OKLCH的优点

  1. 设计师无需手动挑选每个颜色，可以通过设定公式并选择几个关键色生成整个调色板。
  2. 支持广色域P3颜色，让设备可以展示更多颜色。
  3. 更适合颜色修改和调色板生成，解决了Sass中darken()等函数可能带来的意外效果。
  4. 提供更好的无障碍体验，因为其亮度一致。
  5. 对于人类更直观易读，能快速了解某个颜色的属性。

示例与应用

通过OKLCH颜色选择器可以更直观地了解这一新型颜色空间，并解决某些显示器无法显示全部颜色的问题。

如果您想了解更多细节，请继续阅读下文。

CSS颜色的发展历程

CSS颜色模块4级规范

CSS Colors Module Level 4于2022年7月5日成为候选推荐标准。该规范新增了如oklch()之类的多种定义颜色的方法，极大地提升了代码的可读性和无障碍特性。

此外，现代显示屏已能支持更多的色彩，例如P3广色域。相比传统的sRGB，它可以额外覆盖约30%的人眼可见颜色，这为设计师提供了更大的创作空间。

OKLCH与其他CSS颜色格式的比较

尽管目前还有些生态系统限制，但OKLCH具有以下优势：

  • 它具备原生CSS支持。
  • 能够编码广色域颜色，包括P3及以上。
  • 更适于颜色修改，提供独立的调整轴，确保更改后的对比度不变。

如何在项目中使用OKLCH

当前所有主流浏览器均支持oklch()语法。以下是具体步骤：

  1. 替换现有颜色：利用在线工具或脚本将现有的十六进制、RGB、HSL转换为OKLCH格式。
  2. 构建调色板：将所有颜色定义为CSS自定义属性，便于管理和维护。
  3. 检查与维护：借助Stylelint插件保证一致性，并检测超出sRGB范围的颜色是否被正确处理。

通过这些方法，您可以充分利用OKLCH带来的便利，不仅提升代码质量，还能让用户享受到更加丰富多彩的视觉体验。

总结来说，迁移到OKLCH为您带来的主要益处包括更高的可读性、简单的颜色修改、相对颜色支持以及对P3广色域的良好兼容性。此外，它还有助于加强开发团队与设计团队之间的沟通，推动整体项目的顺利进行。