CSS Multiple Color Math

PROJECT
css
color
Organization: Lea Verou

Spec work to flesh out a CSS syntax that allows color math involving 2+ colors

About


I proposed Relative Colors in 2018, and they have now been implemented in every browser and are at the core of many modern design systems.

While they do afford a lot of flexibility in terms of the types of color manipulations to do, they are restricted to using a single color as input. This does cover a good chunk of use cases, but use cases kept emerging that required math on components of two or more colors.

In Jan 2025 I proposed an extension to Relative Colors that supports calculations involving two or more colors. It was accepted by the CSS WG two weeks later. Before that, in 2022 I proposed a CSS function to read individual color components, from any color space (e.g. "get me the lightness of the color in this variable"). This could provide an alternative avenue for this type of color manipulation: more verbose, but also more flexible, as these values would be regular numbers that could be used anywhere. It was also accepted by the CSS WG a few days later.

Despite being accepted by the CSS WG, none of these features are part of the CSS Color specifications yet, for the simple reason that …someone needs to do the work of fleshing them out and writing up the spec.

Any funds contributed to this project will go towards:
  • Fleshing out the syntax of both proposals and exploring implementability tradeoffs
  • Adding one or both of them to the CSS Color 6 specification 
  • Any additional funds will go towards championing the feature(s) and driving them towards browser implementation.

While nothing is certain when it comes to web standards work, you can see in my list of past standards work that this is not my first rodeo. Especially for a relatively small feature such as this, I'm optimistic that if I put in the work, I can make good progress on it.

Our team

Today's Balance
$0.00
Ready for implementations
$5,000

Contribute


Become a financial contributor.

Financial Contributions

One-time contribution
5% of design work goal

All it takes is 20 people pressing this button to have enough for the first step (and 100 for the whole thing). Be one of them!

$75 USD
One-time contribution
10% of design work goal

All it takes is 10 people pressing this button to have enough for the first step (and 50 for the whole thing). Be one of them!

$150 USD
One-time contribution
10% of goal

This by itself can fund initial API design work. And it only takes 10 people clicking this button for the whole thing!

$500 USD
One-time contribution
100% of goal

Need this, yesterday? Sponsor the whole thing! Your name will be listed in the spec’s Acknowledgements section, making you a part of CSS history.

$5,000 USD
Custom contribution
Donation
Make a custom one-time or recurring contribution.