[css-color-4] Define hue interpolation keywords more clearly

[SebastianZ]

CSS Color 4 defines four hue interpolation keywords shorter, longer, increasing, and decreasing.

While they are described mathematically, it may be beneficial for authors and implementers to also provide a short prose describing their meaning. Something in the sense of

shorter = shorter hue angle around the color circle
longer = longer hue angle around the color circle
increasing = hue angle strictly increases from first to second color
decreasing = hue angle strictly decreasses from first to second color

It might also be worth to provide some example images showing color circles with arrows between two colors.

Sebastian

[svgeesus]

I agree the current description is implementer focused and math heavy, and would benefit from better descriptions and some sample images.

That would also help counteract some of the current lack of interop where implementations aren't following the spec, especially around missing hues.

[svgeesus]

would benefit from better descriptions and some sample images.

I added explanatory prose, in particular calling out the benefits of increasing and decreasing with animations, and also added worked examples.

I would like to add diagrams too, but am hampered in how to generate a diagram given SVG lacks conic gradients and control of interpolation colorspace. Still, it's better than it was.

@SebastianZ could you take a look and see if it is clearer?

[SebastianZ]

It's much better than it was. Thanks for that!

I've added a few notes to the commit. Also, there should be examples that show how values are calculated when the 360° threshold is passed. I.e. how does interpolation from 340° to 40° look like when shorter or increasing? Is the computed value halfway through the interpolation 370° or 10°? (If 10°, "increasing" might actually be confusing.)

Sebastian

[svgeesus]

We now have

Hue angles are interpolated so that, as they progress from the first color to the second, the angle is always increasing. If the angle increases to 360 it is reset to zero, and then continues increasing.

and

Hue angles are interpolated so that, as they progress from the first color to the second, the angle is always decreasing. If the angle decreases to 0 it is reset to 360, and then continues decreasing.

[SebastianZ]

I still believe, the spec. would benefit from additional examples passing the 360°/0° threshold, though the text is now clear enough. Thank you for clarifying the interpolations!

Sebastian

[yisibl]

I can add a similar illustration to the specification if that is agreeable.

[svgeesus]

@yisibl looks good, but better if the first one is, say, 350 to 60 and the second, 10 to 60 so that both pass through the 360=0 point.

[svgeesus]

@yisibl if you are able to make the suggested changes, I am happy to add those to the spec (and credit you for them, of course)

[yisibl]

@yisibl if you are able to make the suggested changes, I am happy to add those to the spec (and credit you for them, of course)

Yes, it's in my TODO list. For the above example, what format would you suggest for the resource? PNG or provide an HTML demo?

[svgeesus]

How did you make it, originally?

PNG would be fine; adding whatever was used to make it would be ideal (so it can be regenerated if needed) but isn't necessary.

[svgeesus]

@yisibl since the substantive changes have been made to the spec, I am closing this off as completed. However, if you do wish to contribute a diagram, please feel free to either send a PR or to re-open this issue.