search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 657 forks source link

[css-images-4] sRGBA assumption on gradients, and premultiplied other color spaces #5669

Open svgeesus opened 3 years ago

svgeesus commented 3 years ago

Tagging Images 4 for fixing; I'm aware that currently, Images 4 has the same gradient stuff as Images 3.

Two things in the CSS Images definition of gradients hinder integration with CSS Color 4:

  1. The <<color>> token links to CSS Color 3, which only allows sRGB values. CSS Color 4, which is the current work, allows other RGB spaces, CMYK, Lab, and LCH.

  2. the section coloring the gradient line says that

Between two color stops, the gradient line’s color is interpolated between the colors of the two color stops, with the interpolation taking place in premultiplied RGBA space

which would force all colors to be

a) converted to sRGB, resulting in gamut mapping b) interpolated in sRGB gamma-encoded space.

Suggested fixes are

  1. Change the link for <<color>> to CSS Color 4, which is the current specification
  2. Link to the existing interpolation section of CSS Color 5 which already covers things like hue interpolation in cylindrical colorspaces
  3. State that for compatibility, color stops which are all in an sRGB space (this includes hsl, hwb, named colors) are interpolated in premultiplied sRGBA (this gives a poor result, but is Web compatible)
  4. Add an opt-in feature on gradients to select another color space. At minimum CIE XYZ (for linear-light blending) and CIE Lab (for perceptually uniform linear interpolation) and CIE LCH (for perceptually uniform chroma-preserving angular interpolation) should be supported

In addition, the interpolation section of CSS Color 5 needs to define how premultiplied alpha is handled. For example in Lab or in XYZ, premultiplying all three component values will work; in LCH, premultiplying hue would change the hue so should not be done.

I'm happy to help with examples (CSS, color calculations, rendered results) of interpolated gradient lines which involve non-sRGB stops.

@tabatkins @fantasai @LeaVerou

svgeesus commented 3 years ago

In addition, the interpolation section of CSS Color 5 needs to define how premultiplied alpha is handled.

It now defines handling for premultiplied alpha.

I also added premultiplied alpha support to color.js, to allow playing around with gradients in various interpolation spaces.