Re: [csswg-drafts] [css-color-5] How should negative percentages behave in color-mix()? (#6047)

> I'll note that my "the hue is unchanged" is talking about the HSL hue; given that this is doing mixing in RGB, it seems reasonable to talk about the major sRGB cylindrical system.

The HSL hue is not at al perceptually uniform. As [an example in CSS Color 4 shows](https://drafts.csswg.org/css-color-4/#ex-hsl-sucks-more) a 30deg difference is barely noticeable is some areas while making a huge difference in others. The hue in LCH, while not perfect, is vastly more useful.

> If you look at the colors in LCH, you do get slight hue changes (using this converter just for ease):

The converter you are using seems to be restricted to integer arithmetic, and also silently clamps sRGB values to [0..255] which of course alters the hue. And given your choice of mix colors right up against the gamut boundary (only one primary being used, the other two are zero), naturally any negative mix takes us out of gamut.

However, the main reason for the small LCH hue changes you are seeing is the mixing being done in gamma-encoded sRGB space. Switching to linear-light sRGB as the mix space improves things because now we are actually simulating mixing two lights; while changing to LCH (the default, for `color-mix()`) is also chroma-preserving and perceptually uniform. Both options are useful, and both are better than mixing in a gamma-encoded space.

Your two start colors have hue angles of 36.461(middleRed) and 134.391 (middleGreen). The mixture with -20% middleGreen has a hue angle of 16.875 (mix in LCH), 18.51 (mix in linear-light sRGB) and 34.62 (mix in gamma-encoded sRGB).

The mixed result are all out of sRGB gamut (negative amount of the green component, as expected)

[mix example with three mixing colorspaces](https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2Ff97d3aacd4002bfe56a8e64db784cbed)

![screenshot of mix example](https://user-images.githubusercontent.com/2506926/113328784-c3358800-92ea-11eb-8133-cb94c2d4a0f6.png)

So to summarize: the assumption errors and calculation errors in your examples were:

- you thought using darker colors would keep the mix result in-gamut, but it doesn't because they are still on the edge
- thus, the mixtures with negative percentages are out of gamut (negative components)
- the converter you use silently drops the negative components, misleading you about the actual result
- doing mixtures in a gamma-encoded space gives results that are too dark
- using a better mixing colorspace gives better results (but still out of gamut, given the starting colors)


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


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

Received on Thursday, 1 April 2021 17:13:22 UTC