OKLCH - 更好的网页设计的新选择

profile image

了解OKLCH是什么，它如何克服传统RGB和HSL的局限性，以及如何在网页设计中利用它。

CSS

本帖由 DeepL 翻译。如有任何翻译错误，请告知我们！

一种名为OKLCH的新颜色空间已经出现。像Tailwind CSS这样的主要框架已经开始采用它，现代浏览器也支持它。在本文中，让我们探索OKLCH是什么，它与现有颜色空间方法有何不同，以及为什么它被开发出来。

颜色模型的演变

RGB颜色模型的局限性

RGB颜色模型设计用于匹配计算机显示器的工作方式，是计算机图形和网页中最广泛使用的方法。它通过组合三个通道（红、绿、蓝）的值（0-255）来表示颜色，但它有以下局限性：

  1. 非直观的颜色操作：很难预测RGB值会产生什么颜色。例如，试着猜一下rgb(128, 57, 198)代表什么颜色！
  2. 非线性亮度：在RGB中，亮度计算为三个通道的平均值或加权平均值，这与人类视觉感知不一致。例如，纯蓝色(rgb(0, 0, 255))和纯绿色(rgb(0, 255, 0))的RGB值总和相同，但对人类来说，绿色看起来要亮得多。

  3. 渐变问题：RGB颜色之间的渐变通常在中间显示不需要的灰色或暗淡的颜色。这个问题在互补色之间的渐变（例如，红→蓝）中特别明显。
    css
    background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%);
  4. 有限的色域：它局限于sRGB色域，无法利用现代显示器可以表示的更广泛的色域（如P3）。

HSL颜色模型的局限性

HSL（色相、饱和度、亮度）是比RGB更直观的颜色模型，但它仍然有几个局限性：

  1. 缺乏感知均匀性：与RGB一样，HSL的亮度（L）与人类视觉感知不一致。例如，具有相同亮度（L）值的不同色相（H）在眼睛看来可能具有不同的亮度。
  2. 饱和度不平衡：饱和度（S）的效果因亮度（L）而异。在非常暗或非常亮的颜色中，饱和度变化几乎不明显。
    HSL - Blue (Hue: 240°)

    Lightness: 10%

    S=0%
    S=50%
    S=100%

    Lightness: 50%

    S=0%
    S=50%
    S=100%

    Lightness: 90%

    S=0%
    S=50%
    S=100%
  3. 持续的渐变问题：HSL与RGB一样，在渐变中存在中间颜色暗淡的问题。
  4. 有限的色域：HSL也在sRGB色域内运行，因此无法表示更广泛色域的颜色。

颜色空间的演变：LAB、LCH、Oklab

为了克服这些局限性，不断开发新的颜色空间模型。要解释详细的差异需要数学讨论，我在这里会跳过。

LAB

CIE LAB（或CIELAB）是国际照明委员会（CIE）在1976年开发的颜色空间。LAB设计用于匹配人类视觉感知，由三个轴组成：

  • L：亮度，0（黑色）到100（白色）
  • a：绿-红轴，负值为绿色，正值为红色
  • b：蓝-黄轴，负值为蓝色，正值为黄色

LCH（CIELCh）

LCH是LAB颜色空间转换为极坐标的结果。这里，'L'与LAB中的亮度值相同，'C'是色度（a和b轴的距离），'H'是色相（a和b轴的角度）。LCH保持了LAB的感知均匀性，同时允许直观地操作颜色和色度。

然而，CIE LAB和LCH也有局限性。在蓝色区域存在失真现象。

Oklab颜色空间

Oklab是Björn Ottosson在2020年开发的新颜色空间，旨在克服CIE LAB的局限性。Oklab具有与LAB相同的结构（L、a、b），但使用不同的颜色转换方法。

开发者说"Ok"前缀是因为这个颜色模型做了一个OK的工作...

什么是OKLCH？

OKLCH是一种设计用于更接近人类视觉感知地表示颜色的颜色空间。它是Oklab转换为极坐标的结果，保持了Oklab的所有优点，同时允许直观地操作色相（H）和色度（C）。它可以被视为CIELCh和Oklab优点的结合。

OKLCH的组成部分

  1. L（亮度）

    • 表示颜色的亮度，从0（黑色）到1（白色）或0%到100%
    • 与人类视觉感知一致，因此值的变化在我们眼中被感知为相等的亮度变化水平

  2. C（色度，饱和度/颜色强度）

    • 表示颜色的鲜艳度或强度
    • 0是完全灰色（无色），值越高，颜色越鲜艳
    • 最大值因显示器的色域（sRGB、P3等）而异，通常低于0.37

  3. H（色相）

    • 表示颜色的类型，以0到360度的角度表示
    • 红色（0/360）、黄色（90）、绿色（140）、蓝色（220）、紫色（320）等，以角度表示围绕一个完整的圆

  4. A（透明度）

    • 可选地，透明度可以在/后指定为0到1或0%到100%的值

这些组成部分彼此独立运行。改变一个值不会影响其他值。这是解决现有颜色模型如RGB或HSL主要缺点的特性之一。

在CSS中使用OKLCH

css
/* 基本语法 */
color: oklch(L C H);
color: oklch(L C H / A);

/* 亮蓝色 */
color: oklch(0.7 0.2 240);

/* 透明黄色 */
color: oklch(60% 0.25 90 / 80%);

/* 非常鲜艳的红色（P3色域） */
color: oklch(0.6 0.34 30);

/* 灰度（色度0） */
color: oklch(0.5 0 0);  /* 中灰色 */
color: oklch(0.8 0 0);  /* 浅灰色 */
color: oklch(0.2 0 0);  /* 深灰色 */
  • L值可以表示为小数（0~1）或百分比（0%~100%）
  • C值通常表示为小数，值低于0.37在大多数显示器上可以安全表示
  • H值表示为0到360的角度，单位（deg）可以省略

OKLCH的优势

  1. 感知均匀性： OKLCH的设计使得值的变化在视觉上均匀感知。例如，亮度变化10%在所有颜色中感觉都是相似的亮度水平。

    RGB
    OKLCH

  2. 直观的颜色操作： 在OKLCH中，亮度、色度和色相可以独立调整。这使得创建颜色调色板或设计无障碍性更容易且更可预测。

    HSL
    0%
    20%
    40%
    60%
    80%
    100%
    OKLCH
    0
    0.05
    0.1
    0.15
    0.2
    0.25

  3. 广泛的色域支持： OKLCH不仅支持sRGB，还支持现代显示器中的更广泛色域如P3。在最新的移动设备或高端显示器上可以明显感受到差异。

  4. 一致的渐变： 使用OKLCH，颜色之间的渐变显得平滑自然。它大大减少了RGB或HSL中常见的中间颜色暗淡或颜色带状问题。

    RGB
    OKLCH

  5. 增强的无障碍性： 可以在保持一致亮度（L）值的同时调整颜色，这对于亮度对比重要的无障碍设计有利。这使得创建符合WCAG无障碍标准的颜色组合更容易。

使用案例

颜色调色板生成

通过定期调整OKLCH的L、C和H值，可以自动生成直观且一致的颜色调色板。

css
/* 在保持相同亮度和色度的同时只改变色相 */
--primary: oklch(65% 0.2 240);  /* 蓝色 */
--accent1: oklch(65% 0.2 30);   /* 红色 */
--accent2: oklch(65% 0.2 120);  /* 绿色 */

/* 在保持相同色相和色度的同时创建亮度步骤 */
--primary-100: oklch(90% 0.2 240);  /* 非常浅的蓝色 */
--primary-500: oklch(65% 0.2 240);  /* 中蓝色 */
--primary-900: oklch(30% 0.2 240);  /* 深蓝色 */

Tailwind CSS v4

Tailwind CSS在v4版本中将其整个默认颜色调色板从RGB升级为OKLCH。这特别是为了在支持P3色域的显示器上提供更鲜艳和丰富的颜色。

结论

OKLCH是一种适合人类视觉的颜色空间，克服了现有颜色模型的局限性，实现了更直观和可预测的颜色工作。凭借广泛的色域支持、平滑的渐变和增强的无障碍性等各种优势，它是现代网页设计和UI/UX领域应该采用的新颜色空间。

❤️ 0
🔥 0
😎 0
⭐️ 0
🆒 0