CSS中的色彩空间：Display-P3、LCH与Lab色彩模型的色域覆盖与转换 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS色彩空间漫谈：Display-P3、LCH与Lab

大家好，今天我们来深入探讨CSS中的色彩空间，重点关注Display-P3、LCH和Lab这三种模型。我们将从它们的基本概念入手，分析其色域覆盖范围，并通过代码演示如何在它们之间进行转换，以及在CSS中如何应用它们。

1. 色彩空间基础概念

色彩空间，也称为颜色模型，是一种组织色彩的方式。它定义了一个颜色范围，并为每种颜色分配唯一的坐标。不同的色彩空间适用于不同的应用场景，例如显示器、打印机和图像处理。

最常见的色彩空间包括：

sRGB: 标准红绿蓝，是互联网上最常用的色彩空间。它被广泛用于显示器、浏览器和图像编辑软件。
Display-P3: 一种比sRGB更宽广的色彩空间，特别是在红色和绿色方面。它常用于高端显示器和移动设备，能呈现更生动、更真实的色彩。
LCH: 基于CIE Lab色彩空间的柱坐标表示，更容易理解和操作色彩的感知特性，例如亮度(L)、色度(C)和色相(H)。
Lab: 一种与设备无关的色彩空间，旨在模拟人类视觉感知。它由亮度(L)以及两个颜色通道a和b组成，其中a代表从绿色到红色的范围，b代表从蓝色到黄色的范围。
HSL: 色相(H)、饱和度(S)、亮度(L)的色彩空间，使用较为直观，但也存在感知均匀性问题。
HSV: 色相(H)、饱和度(S)、明度(V)的色彩空间，与HSL类似，同样存在感知均匀性问题。

2. Display-P3：更宽广的色域

Display-P3 色彩空间旨在提供比 sRGB 更广泛的色彩范围，使其能够显示更丰富的红色和绿色。它由苹果公司开发，并被广泛应用于其设备和应用程序中。

2.1 Display-P3的色域覆盖

Display-P3 色彩空间覆盖了约 45.5% 的 CIE 1931 色域，而 sRGB 色彩空间仅覆盖约 35.9%。这意味着 Display-P3 可以显示更多 sRGB 无法显示的颜色。

可以用下图来直观理解：

  +---------------------+
  |                     |
  |      Display-P3      |
  |      (Larger)       |
  |                     |
  |   +-------------+   |
  |   |    sRGB     |   |
  |   |   (Smaller) |   |
  |   +-------------+   |
  |                     |
  +---------------------+

2.2 CSS中的Display-P3

在CSS中，我们可以使用 color() 函数来指定 Display-P3 颜色：

body {
  background-color: color(display-p3 0.9 0.2 0.1); /* 鲜艳的红色 */
}

上面的代码将背景颜色设置为一个鲜艳的红色，这个红色在 sRGB 色彩空间中可能无法完全呈现。

2.3 检测Display-P3支持

为了确保代码在不支持 Display-P3 的设备上也能正常工作，可以使用 @supports 媒体查询来检测浏览器是否支持 Display-P3：

@supports (color: color(display-p3 1 1 1)) {
  body {
    background-color: color(display-p3 0.9 0.2 0.1);
  }
}

这段代码只有在浏览器支持 Display-P3 色彩空间时才会应用背景颜色。如果不支持，则不会应用任何样式，或者可以提供一个 sRGB 的替代颜色。

3. LCH和Lab：感知均匀的色彩空间

LCH 和 Lab 色彩空间是基于人类视觉感知的色彩模型。它们旨在使颜色之间的距离与人们感知到的颜色差异成比例。这意味着在 LCH 或 Lab 色彩空间中，颜色值相近的两种颜色，在人眼中看起来也更相近。

3.1 LCH和Lab的组成

Lab:
- L: 亮度（Lightness），范围从 0 到 100，0 代表黑色，100 代表白色。
- a: 从绿色到红色的色度分量，负值代表绿色，正值代表红色。
- b: 从蓝色到黄色的色度分量，负值代表蓝色，正值代表黄色。
LCH:
- L: 亮度（Lightness），与 Lab 中的 L 相同。
- C: 色度（Chroma），表示颜色的鲜艳程度，0 代表灰色，值越大颜色越鲜艳。
- H: 色相（Hue），表示颜色的角度，范围从 0 到 360 度，0 度代表红色，120 度代表绿色，240 度代表蓝色。

3.2 LCH和Lab的优势

感知均匀性: 这是 LCH 和 Lab 最重要的优势。在这些色彩空间中，颜色值的变化与人眼感知到的颜色变化更一致。
独立于设备: LCH 和 Lab 色彩空间是与设备无关的，这意味着它们可以跨不同的显示器和打印机呈现一致的颜色。

3.3 CSS中的LCH和Lab

在CSS中，我们可以使用 lab() 和 lch() 函数来指定 LCH 和 Lab 颜色：

body {
  background-color: lab(50 60 20); /* Lab颜色 */
  color: lch(80 40 120); /* LCH颜色 */
}

3.4 LCH在颜色选择中的应用

LCH 尤其适用于创建颜色主题和调整颜色。例如，如果我们想要创建一个基于某种颜色的颜色主题，我们可以保持 L 和 H 不变，只调整 C (色度) 来创建不同的颜色变体。

3.5 为什么LCH比HSL/HSV更好？

HSL 和 HSV 也是常用的色彩空间，但它们存在感知均匀性问题。例如，在 HSL 中，改变亮度 (L) 的值可能不会产生线性变化的感知亮度。这意味着，如果将 L 从 50% 增加到 75%，人眼感知到的亮度增加可能并不相同。LCH 则克服了这个问题，亮度 L 的改变与人眼感知到的亮度变化更加一致。

4. 色彩空间转换

在不同的色彩空间之间进行转换是常见的任务。例如，我们可能需要将 Display-P3 颜色转换为 sRGB 颜色，以便在不支持 Display-P3 的设备上显示。或者将 sRGB 颜色转换为 LCH 颜色，以便进行更精确的颜色调整。

4.1 色彩空间转换的复杂性

色彩空间转换并非简单的数学公式转换，需要考虑到色域映射问题。由于不同的色彩空间覆盖的颜色范围不同，将一种色彩空间的颜色转换到另一种色彩空间时，可能会出现超出目标色彩空间范围的情况。这时，我们需要使用色域映射算法来将超出范围的颜色映射到目标色彩空间的边界上，以尽可能保持颜色的视觉效果。

4.2 JavaScript实现色彩空间转换

以下是一些使用 JavaScript 实现色彩空间转换的示例。这里我们使用一个名为 colorjs.io 的库，它提供了丰富的色彩空间转换功能。

首先，你需要安装 colorjs.io 库：

npm install colorjs.io

然后，你可以使用以下代码进行色彩空间转换：

import Color from 'colorjs.io/src/color.js";

// sRGB to Display-P3
function srgbToDisplayP3(r, g, b) {
  const color = new Color(`srgb(${r}, ${g}, ${b})`);
  const displayP3Color = color.to("display-p3");
  return displayP3Color.coords;
}

// Display-P3 to sRGB
function displayP3ToSrgb(r, g, b) {
  const color = new Color(`display-p3(${r}, ${g}, ${b})`);
  const srgbColor = color.to("srgb");
  return srgbColor.coords;
}

// sRGB to LCH
function srgbToLch(r, g, b) {
  const color = new Color(`srgb(${r}, ${g}, ${b})`);
  const lchColor = color.to("lch");
  return lchColor.coords;
}

// LCH to sRGB
function lchToSrgb(l, c, h) {
  const color = new Color(`lch(${l}, ${c}, ${h})`);
  const srgbColor = color.to("srgb");
  return srgbColor.coords;
}

// sRGB to Lab
function srgbToLab(r, g, b) {
  const color = new Color(`srgb(${r}, ${g}, ${b})`);
  const labColor = color.to("lab");
  return labColor.coords;
}

// Lab to sRGB
function labToSrgb(l, a, b) {
  const color = new Color(`lab(${l}, ${a}, ${b})`);
  const srgbColor = color.to("srgb");
  return srgbColor.coords;
}

// 示例
const srgbColor = [0.8, 0.2, 0.1]; // 红色
const displayP3Color = srgbToDisplayP3(...srgbColor);
console.log(`sRGB (${srgbColor}) to Display-P3:`, displayP3Color);

const lchColor = srgbToLch(...srgbColor);
console.log(`sRGB (${srgbColor}) to LCH:`, lchColor);

const labColor = srgbToLab(...srgbColor);
console.log(`sRGB (${srgbColor}) to Lab:`, labColor);

const srgbFromLch = lchToSrgb(...lchColor);
console.log(`LCH (${lchColor}) to sRGB:`, srgbFromLch);

const srgbFromLab = labToSrgb(...labColor);
console.log(`Lab (${labColor}) to sRGB:`, srgbFromLab);

4.3 色域映射策略

当进行色彩空间转换时，如果目标色彩空间的色域小于源色彩空间，就需要进行色域映射。常见的色域映射策略包括：

裁剪（Clipping）： 将超出目标色域范围的颜色直接裁剪到边界上。这种方法简单粗暴，但可能会导致颜色失真。
压缩（Compression）： 将源色彩空间的整个色域压缩到目标色域中。这种方法可以保留颜色之间的相对关系，但可能会降低颜色的鲜艳程度。
色域映射算法： 使用更复杂的算法来尽可能保持颜色的视觉效果。这些算法通常会考虑到人眼对颜色的感知特性，以选择最佳的映射方案。

colorjs.io 库内部已经实现了多种色域映射算法，可以根据需要进行配置。

4.4 注意事项

色彩空间转换可能会导致颜色失真，尤其是在色域差异较大的情况下。
不同的色彩空间转换算法可能会产生不同的结果。
在进行色彩空间转换时，应根据具体应用场景选择合适的算法。

5. 在CSS中应用色彩空间

了解了不同的色彩空间以及它们之间的转换，现在我们来看看如何在 CSS 中应用它们。

5.1 使用 color() 函数

color() 函数是 CSS 中用于指定颜色的通用方法。它可以接受不同的色彩空间作为参数，例如 srgb, display-p3, lab, lch 等。

body {
  background-color: color(srgb 0.8 0.2 0.1); /* sRGB颜色 */
  color: color(display-p3 0.9 0.3 0.2); /* Display-P3颜色 */
  border: 2px solid color(lab 50 60 20); /* Lab颜色 */
}

5.2 使用 color-mix() 函数

color-mix() 函数用于混合两种颜色。它可以指定不同的色彩空间进行混合，并控制混合的比例。

body {
  background-color: color-mix(in srgb, red 50%, blue 50%); /* 在 sRGB 色彩空间中混合红色和蓝色 */
  color: color-mix(in lch, color(lch 80 40 120), white 20%); /* 在 LCH 色彩空间中混合 LCH 颜色和白色 */
}

5.3 使用 CSS 自定义属性 (变量)

可以将颜色值存储在 CSS 自定义属性中，以便在整个样式表中重复使用。这可以提高代码的可维护性和可读性。

:root {
  --primary-color: color(display-p3 0.9 0.2 0.1);
  --secondary-color: color(lch 80 40 120);
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

5.4 响应式设计中的色彩空间

可以结合媒体查询和 CSS 自定义属性，根据不同的设备和屏幕特性来调整颜色。例如，在支持 Display-P3 的设备上使用 Display-P3 颜色，而在不支持的设备上使用 sRGB 颜色。

:root {
  --primary-color: color(srgb 0.8 0.2 0.1); /* 默认 sRGB 颜色 */
}

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --primary-color: color(display-p3 0.9 0.2 0.1); /* 支持 Display-P3 时使用 Display-P3 颜色 */
  }
}

body {
  background-color: var(--primary-color);
}

5.5 使用JavaScript动态调整颜色
可以使用JavaScript动态地读取和修改CSS颜色值，并进行色彩空间转换。这在需要根据用户交互或其他条件动态改变颜色的场景中非常有用。

const element = document.getElementById('myElement');

function changeBackgroundColor(colorSpace, ...colorValues) {
    element.style.backgroundColor = `color(${colorSpace} ${colorValues.join(' ')})`;
}

// 例如，将背景颜色设置为一个动态计算的LCH颜色
document.getElementById('changeColorButton').addEventListener('click', () => {
    const l = 50; // 亮度
    const c = Math.random() * 50; // 随机色度
    const h = Math.random() * 360; // 随机色相
    changeBackgroundColor('lch', l, c, h);
});

6. 实际应用案例

图像编辑软件: 在图像编辑软件中，可以使用 LCH 或 Lab 色彩空间来进行颜色调整，以获得更精确和可预测的结果。
Web 设计: 在 Web 设计中，可以使用 Display-P3 色彩空间来呈现更生动和真实的颜色，尤其是在高端显示器上。
数据可视化: 在数据可视化中，可以使用 LCH 色彩空间来创建颜色渐变，以确保颜色之间的差异与数据值的差异成比例。

7. 一些建议和最佳实践

了解目标受众的设备: 在选择色彩空间时，应考虑目标受众使用的设备。如果目标受众主要使用 sRGB 设备，则无需使用 Display-P3。
使用色彩空间转换工具: 在不同的色彩空间之间进行转换时，应使用可靠的色彩空间转换工具，以确保颜色准确性。
测试颜色在不同设备上的显示效果: 在发布 Web 应用程序之前，应在不同的设备上测试颜色显示效果，以确保颜色在所有设备上都能正常显示。
逐步采用新的色彩空间: 在采用新的色彩空间时，可以逐步进行，例如先在支持 Display-P3 的设备上使用 Display-P3 颜色，然后在不支持的设备上使用 sRGB 颜色。

8. 总结：深入理解色彩，运用色彩空间

我们深入探讨了 CSS 中的色彩空间，重点关注了 Display-P3、LCH 和 Lab 这三种模型。它们各有优势，适用于不同的应用场景。通过代码示例，我们了解了如何在它们之间进行转换，以及如何在 CSS 中应用它们。选择合适的色彩空间，能更好地呈现颜色效果。

希望今天的分享能帮助大家更好地理解和应用 CSS 中的色彩空间。谢谢大家！

更多IT精英技术系列讲座，到智猿学院