混合混合模式饱和度来自什么色彩空间？

Question

The spec for blend-mode saturation 说：

使用源颜色的饱和度和背景颜色的色调和亮度创建颜色。

最初我认为它是 HSL，因为它是您可以在 Web 开发中使用的唯一具有饱和度通道的色彩空间，但显然不是这样：

.color {
  width: 100px;
  height: 100px;
}

.expected-color {
  background: hsl(270, 25%, 50%);
}

.backdrop-color {
  background: hsl(270, 85%, 50%);
}

.source-color {
  mix-blend-mode: saturation;
  background: hsl(45, 25%, 50%);
}

Expected
<div class="color expected-color"></div>

Actual
<div class="color backdrop-color">
  <div class="color source-color"></div>
</div>

演示 HSV/HSB 并不容易，但我使用颜色转换器（例如link）所做的测试表明它也不是那种颜色空间。

.color {
  width: 100px;
  height: 100px;
}

.expected-color {
  /* HSB/HSV - 270, 25, 50 */
  background: #706080;
}

.backdrop-color {
  /* HSB/HSV - 270, 85, 50 */
  background: #491380;
}

.source-color {
  /* HSB/HSV - 45, 25, 50 */
  mix-blend-mode: saturation;
  background: #807860;
}

Expected
<div class="color expected-color"></div>

Actual
<div class="color backdrop-color">
  <div class="color source-color"></div>
</div>

LCH (converter) 也一样，它没有饱和度通道，但它的色度通道实际上是饱和度的模拟：

.color {
  width: 100px;
  height: 100px;
}

.expected-color {
  /* LCH - 50, 25, 270 */
  background: rgb(90,121,161);
}

.backdrop-color {
  /* LCH - 50, 85, 270 */
  background: rgb(0,125,255);
}

.source-color {
  /* LCH - 50, 25, 45 */
  mix-blend-mode: saturation;
  background: rgb(157,107,90);
}

Expected
<div class="color expected-color"></div>

Actual
<div class="color backdrop-color">
  <div class="color source-color"></div>
</div>

似乎在 Edge、Chrome 和 Firefox 中保持一致。

那么mix-blend-mode: saturation 定义在什么色彩空间中？还是我误解了它的工作原理？

Answer 1

我做了一些（很多）更多的挖掘工作，看起来他们使用的数学是不同色彩空间与一般色彩理论的某种奇怪组合：

规范中描述的饱和函数是：

B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

其中Cb 是背景颜色，Cs 是源颜色；都在 sRGB 空间中（仅表示 R、G 和 B 在 [0 - 1] 范围内）。

其中使用的函数定义为：

    ClipColor(C)
        L = Lum(C)
        n = min(Cred, Cgreen, Cblue)
        x = max(Cred, Cgreen, Cblue)
        if(n < 0)
            C = L + (((C - L) × L) / (L - n))

        if(x > 1)
            C = L + (((C - L) × (1 - L)) / (x - L))

        return C

    Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue

    SetLum(C, l)
        d = l - Lum(C)
        Cred = Cred + d
        Cgreen = Cgreen + d
        Cblue = Cblue + d
        return ClipColor(C)

    Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

    SetSat(C, s)
        if(Cmax > Cmin)
            Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
            Cmax = s
        else
            Cmid = Cmax = 0
        Cmin = 0
        return C;

我们可以忽略ClipColor 和SetX 函数，因为我们只对确定色彩空间（如果有的话）感兴趣。离开：

Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue

Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

什么是Lum？

函数的名称及其用法可能会让您认为它们指的是有时归因于 HSL 中的 L 或 HSB/HSV 中的 B 或 V 的亮度.他们不是。此函数用于确定颜色对人眼的相对亮度。来自YIQ colorspace：

请注意，第一行 - 将映射到 Y（亮度）值 - 与 Lum(C) 公式中的幻数完美匹配（尽管稍微更精确）。

对比一下：

HSB/HSV 中的B/V 频道是Max(R,G,B)。

HSL 中的L 频道是( Max(R,G,B) - Min{R,G,B) ) / 2。

什么是Sat？

这显然是（某种意义上的）饱和度，但它不是来自任何特定的色彩空间。它更像是您如何看待RGB 色彩空间中的饱和度的抽象。第一个建议这是一种考虑饱和度的方法似乎来自this 2003 paper，这在很大程度上是对当时现有色彩空间的批评，并建议使用自未使用的色彩空间IHLS。

对比：

S in HSB/HSV 是 ( Max(R,G,B) - Min(R,G,B) ) / Max(R,G,B) 或 0 如果 Max(R,G,B) 是 0。

如果L 是1 或0，则HSL 中的S 是( Max(R,G,B) - L ) / Min(L, 1 - L) 或0。 （与上面定义的 L 相同）。

---

我能从这一切中得出的唯一结论是mix-blend-mode: saturation 与色彩空间完全无关，而更多地与更一般意义上的“饱和度”有关；同样，mix-blend-mode: luminosity 不一定是关于任何特定的色彩空间，而是一种保持“亮度感知”的方式。

如果我们指出最有可能的候选者，那就是YIQ 色彩空间，在深入研究之前我没有听说过。规范中使用的饱和度的过度简化可以称为色度的度量，这是I和Q通道共同表示的。

对于软件开发人员来说，这些混合模式的命名似乎不可避免地会模棱两可，因为他们的目标受众可能是设计师，而不是工程师。

不是我想要的答案，但似乎确实是答案。

更新

我刚刚与规范的一位编辑（作者？）进行了一次有趣的交流。这种混乱的理由是（解释）“Adobe 产品在过去 20 年中一直这样做，这就是人们习惯的方式”。显然，过多地质疑这种糟糕的推理压力是没有意义的，但我的印象是，规范在很大程度上是在 Photoshop 等中实现的现有混合模式的复制粘贴。