w3c / w3c/csswg-drafts

[css-transitions][css-animations][web-animations] Add control of colorspace used for transitioning colors

Open
#7,063 28 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-animations-2 css-transitions-2 Needs Design / Proposal web-animations-2
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

( Spun out from #7035 )(similar to #7062)

Currently, all color transitions happen in gamma-encoded sRGB space. There is a need to preserve this as a default, for Web compat. However, CSS Color 4 defines a bunch of other color models, which exceed the very limited gamut of sRGB, and there is a need to add control of the color space used for interpolation which is currently unspecified:

  • to avoid needless conversion to sRGB, dropping the more saturated colors
  • because interpolating in gamma-encoded space gives overly dark midpoint colors
  • because some color spaces give better results than others, which kind of varies depending what the start and end colors are, so stylesheet authors need the flexibility to choose.

As this is a common requirement, CSS Color 4 defines a <color-interpolation-method> token and associated color interpolation math; this has already been used in the grammar for `color-mix() in CSS Color 5 and in linear, radial and conic gradients in CSS Images 4.

So this issue proposes to add a new property, initial value auto:

transition-interpolation: [ auto | <color-interpolation-method> ]#

and also to add this to the <single-transition> shorthand. There is no ambiguity (unlike time) so it can go in any order in the shorthand.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the CSS Color 4 interpolation-space definition and compare its use in CSS Color 5 color-mix() and CSS Images 4 gradients. Then inspect the CSS Transitions definitions for transition properties and the single-transition shorthand. Done means resolving the proposed color-space control and specifying its default and shorthand grammar.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.