Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
svgeesus opened this issue Oct 27, 2020 · 1 comment

Comments

@svgeesus
Copy link
Contributor

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 svgeesus added css-images-4 css-color-5 Color modification labels Oct 27, 2020
@svgeesus
Copy link
Contributor Author

svgeesus commented Dec 2, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant