CSS `LCH` 颜色空间 `Gamut Mapping` (色域映射) 与颜色校正

大家好，我是颜色世界的导游，今天咱们来聊聊CSS LCH 颜色空间里的 Gamut Mapping (色域映射) 和颜色校正，这两个家伙听起来高大上，其实也没那么玄乎，本质上就是“颜色搬运工”和“颜色美容师”。准备好了吗？咱们这就出发！

第一站：LCH 颜色空间的“前世今生”

在进入 Gamut Mapping 和颜色校正之前，咱们得先了解一下 LCH 颜色空间是个啥。简单来说，LCH 是一种基于人眼感知设计的颜色模型，它把颜色分解成三个部分：

L (Lightness)： 明度，从 0 (黑) 到 100 (白)。想象一下亮度调节滑块。
C (Chroma)： 色度，颜色的鲜艳程度，从 0 (中性灰) 到理论上的无穷大（但实际设备有上限）。类似于颜料的浓度。
H (Hue)： 色相，就是我们常说的颜色名称，比如红、绿、蓝等等，用角度表示，从 0 到 360 度。想象一下色轮。

LCH 的优点在于它更符合人类的视觉感知。比如，在 RGB 中，改变一个数值可能同时影响明度和色度，而在 LCH 中，你可以单独调整亮度，而不影响颜色的鲜艳程度。

第二站：为什么要进行 Gamut Mapping？

现在，让我们来谈谈 Gamut Mapping。想象一下，你有一张超高清的风景照片，色彩鲜艳得不行。但是，当你把这张照片放到一个普通的显示器上时，颜色却变得平淡无奇。这是因为显示器的色域（Gamut）有限，它能显示的颜色范围小于照片中包含的颜色范围。

色域就像一个颜色的“围栏”，超出围栏的颜色，显示器就无能为力了，只能用围栏里最接近的颜色来代替。这个过程就叫做 Gamut Mapping，也就是把超出目标色域的颜色映射到目标色域内的颜色。

Gamut Mapping 的“常见招式”

Gamut Mapping 的算法有很多种，每种算法都有自己的优缺点。常见的算法包括：

Clipping (裁剪)： 这是最简单粗暴的方法，直接把超出色域的颜色“砍掉”，用色域边界上的颜色来代替。优点是简单快速，缺点是容易造成颜色失真，尤其是在高饱和度区域。
```
/* 假设目标色域是 sRGB */
/* 这个颜色超出 sRGB 色域 */
body {
  background-color: color(lch 60 150 50); /* 色度 150 超出 sRGB */
  /* 浏览器会自动进行 Gamut Mapping，通常是 Clipping */
}
```

Compression (压缩)： 把整个色域“压缩”到目标色域内。优点是能够保留颜色的相对关系，缺点是会降低整体的色彩鲜艳度。

// 伪代码，演示 Compression 的概念
function compressColor(lchColor, targetGamut) {
  let l = lchColor.l;
  let c = lchColor.c;
  let h = lchColor.h;

  // 假设 targetGamut.maxChroma 是目标色域的最大色度
  let maxChroma = targetGamut.maxChroma;

  if (c > maxChroma) {
    c = c * (maxChroma / c); // 压缩色度
  }

  return { l, c, h };
}

Gamut Clipping + Chroma Reduction (色域裁剪 + 色度降低)： 先进行色域裁剪，然后降低超出色域颜色的色度，使颜色更接近目标色域。这是一个比较常用的方法，能够在一定程度上平衡颜色失真和色彩鲜艳度。

// 伪代码，演示 Gamut Clipping + Chroma Reduction
function gamutMapColor(lchColor, targetGamut) {
  let l = lchColor.l;
  let c = lchColor.c;
  let h = lchColor.h;

  let maxChroma = targetGamut.maxChroma;

  if (c > maxChroma) {
    // 先裁剪
    // c = maxChroma;

    // 然后降低色度，降低的程度可以根据超出色域的程度来调整
    let reductionFactor = (c - maxChroma) / c; // 超出越多，降低越多
    c = c * (1 - reductionFactor * 0.5); // 降低 50% 的超出量
  }

  return { l, c, h };
}

重点：CSS 中的 Gamut Mapping

在 CSS 中，color() 函数和 color-mix() 函数会自动进行 Gamut Mapping。浏览器会根据目标显示器的色域，自动选择合适的 Gamut Mapping 算法。虽然我们不能直接控制 Gamut Mapping 的算法，但是可以通过选择合适的颜色空间和调整颜色值，来尽量减少颜色失真。

第三站：颜色校正：让颜色更“正经”

接下来，我们来聊聊颜色校正。颜色校正是指调整颜色的亮度、对比度、色温、色调等参数，使颜色更准确、更自然。颜色校正通常用于处理照片、视频等图像素材，也用于调整显示器的颜色设置。

颜色校正的“常用工具”

Gamma 校正： Gamma 值是指图像的亮度与像素值的关系。 Gamma 值为 1 表示线性关系，Gamma 值小于 1 表示图像偏亮，Gamma 值大于 1 表示图像偏暗。调整 Gamma 值可以校正图像的整体亮度。
```
/* CSS Filter 提供了 brightness 和 contrast 属性，可以模拟 Gamma 校正 */
img {
  filter: brightness(1.2) contrast(0.8); /* 增加亮度，降低对比度 */
}
```
白平衡校正： 白平衡是指调整图像的色温，使白色看起来更纯正。色温是指光源的颜色温度，单位是开尔文 (K)。色温越高，颜色越偏蓝，色温越低，颜色越偏红。白平衡校正可以消除图像中的偏色。
```
/* CSS Filter 提供了 sepia 和 saturate 属性，可以调整色温 */
img {
  filter: sepia(0.2) saturate(1.1); /* 降低一些棕色，增加一些饱和度 */
}
```
色彩平衡校正： 色彩平衡是指调整图像中红、绿、蓝三种颜色的比例，使颜色更平衡。色彩平衡校正可以调整图像的整体色调。
```
/* CSS Filter 提供了 hue-rotate 属性，可以调整色调 */
img {
  filter: hue-rotate(10deg); /* 稍微调整色调 */
}
```

重点：在 CSS 中应用颜色校正

在 CSS 中，我们可以使用 filter 属性来进行颜色校正。 filter 属性提供了多种滤镜效果，包括 brightness、contrast、grayscale、sepia、saturate、hue-rotate、invert、opacity、blur、drop-shadow 等等。我们可以组合使用这些滤镜效果，来实现各种各样的颜色校正效果。

第四站：LCH 颜色空间与颜色校正的“完美结合”

LCH 颜色空间和颜色校正可以结合使用，来实现更精确的颜色调整。比如，我们可以使用 LCH 颜色空间来调整颜色的亮度、色度和色相，然后使用颜色校正来调整颜色的整体色调和对比度。

/* 使用 LCH 颜色空间调整颜色 */
:root {
  --base-color: color(lch 60 80 20); /* 基础颜色 */
  --light-color: color(lch calc(l + 20) c h); /* 亮度增加 20 */
  --dark-color: color(lch calc(l - 20) c h); /* 亮度降低 20 */
}

/* 使用 CSS Filter 进行颜色校正 */
body {
  background-color: var(--base-color);
  filter: contrast(1.1) saturate(1.05); /* 稍微增加对比度和饱和度 */
}

.light {
  background-color: var(--light-color);
}

.dark {
  background-color: var(--dark-color);
}

第五站：一些“实战经验”

了解你的目标色域： 在进行 Gamut Mapping 之前，一定要了解你的目标色域。不同的显示器、浏览器、操作系统，其色域可能不同。你可以使用在线工具或者浏览器插件来检测你的显示器的色域。
选择合适的 Gamut Mapping 算法： 不同的 Gamut Mapping 算法适用于不同的场景。如果你希望保留颜色的相对关系，可以选择 Compression 算法。如果你希望尽量减少颜色失真，可以选择 Gamut Clipping + Chroma Reduction 算法。
谨慎使用颜色校正： 颜色校正过度可能会导致颜色失真。在进行颜色校正时，一定要仔细观察图像，并根据实际情况进行调整。
使用专业的颜色管理工具： 如果你需要进行更精确的颜色管理，可以使用专业的颜色管理工具，比如 ICC 配置文件。

总结：颜色世界的“搬运工”和“美容师”

今天我们一起探索了 CSS LCH 颜色空间中的 Gamut Mapping 和颜色校正。它们就像颜色世界的“搬运工”和“美容师”，负责把颜色从一个地方搬到另一个地方，并让颜色看起来更漂亮、更准确。希望这次旅行能让你对颜色有更深入的了解。

表格总结：

功能	作用	常用方法	CSS 实现
Gamut Mapping	将超出目标色域的颜色映射到目标色域内，保证颜色在不同设备上的显示效果。	Clipping (裁剪), Compression (压缩), Gamut Clipping + Chroma Reduction (色域裁剪 + 色度降低)	浏览器自动进行，无法直接控制。
颜色校正	调整颜色的亮度、对比度、色温、色调等参数，使颜色更准确、更自然。	Gamma 校正, 白平衡校正, 色彩平衡校正	`filter` 属性 (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, opacity, blur, drop-shadow)

希望这次讲座对大家有所帮助！颜色世界博大精深，还有很多值得探索的地方。祝大家在颜色世界里玩得开心！

发表回复 取消回复

发表回复取消回复