Re: [csswg-drafts] [css-color-6] Does color-layers() need a color interpolation method (or similar)? (#13254)

@weinig I'm going to leave out the non-seperable blend modes whose algorithms expect an RGB space and transforms it to a cylindrical space: `hue`, `color`, `luminosity`, `saturation`. I don't even know if these are planned to be targeted.

So we'll focus on all the others. I have a color library that performs these blending modes, but it currently restricts the approach to RGB spaces only. For the experiment, I'll relax this locally and allow things like Oklab.

I'll write a simple script that cycles through the different blend modes and compares the results between `sRGB` and `Oklab`. It assumes C1 is the top-most color and with C3 being on the bottom, starting from the top that would give us `#07c7ed`, `#fc3d99`, `#f5d311`.

```py
c1 = Color('#07c7ed')
c2 = Color('#fc3d99')
c3 = Color('#f5d311')

for mode in ('normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion'):
    for space in ('srgb', 'oklab'):
        r1 = Color.layer([c1, c2], blend=mode, space=space)
        r2 = Color.layer([c2, c3], blend=mode, space=space)
        r3 = Color.layer([c1, c3], blend=mode, space=space)
        r4 = Color.layer([c1, c2, c3], blend=mode, space=space)
        Steps([r1, r2, r3, r4])
```

We blend each of the overlapping regions between each color, and then blend all of them stacked on top of each other. You can visualize the configuration like so.

<img width="521" height="157" alt="Image" src="https://github.com/user-attachments/assets/561f4230-d299-49bc-a169-b38ec3ba727e" />

You can follow the link here, which shows all of the examples using the browser to blend the colors. If you have a Display P3 monitor vs sRGB, the colors may differ slightly depending on which gamut the browser is blending in.

So, here are the results, starting with `normal` mode, moving down to `exclusion`. `srgb` is the top example and `oklab` being on the bottom:

<img width="1082" height="1050" alt="Image" src="https://github.com/user-attachments/assets/c8290610-c523-4201-8876-ab4806569da3" />

Some blending modes might work okay, not by design, but by coincidence. Blend modes like `color-doge`, `color-burn` will only work with an RGB space.

These blend modes are operating on a space with the assumption they are RGB. When the space is not, the algorithms likely won't work the same.

-- 
GitHub Notification of comment by facelessuser
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13254#issuecomment-3700071287 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 30 December 2025 17:52:27 UTC