[filters] Proposal: color-filter

color-filter is a new inherited property that modifies color values used when rendering. It's syntax is similar to the filter property, and defines a transform function that is applied to a color.

Example:

.foo {
  color: blue;
  color-filter: invert();
}

This would apply a channel invert to all the colors in properties matching .foo. In this case the text color would render as an orangey-yellow.

The set of filters available are the same as the current filter property, with the exclusion of those that move pixels (i.e. drop-shadow and blur).

Notes:

• Efficient because it only applies to color values at rendering time.
• Very convenient way to do a "dark mode" version of your site.
• Applies to color values, including those in gradients.
• Leaves images and emoji untouched.
• No nasty side effects of filter
  • No new stacking context
  • Because it is inherited, descendants can change the value

Start by comparing the proposal with the existing CSS filter property and the CSSWG specification workflow. The issue names no files or tests; done would require resolving the proposal's behavior and documenting the agreed color-filter syntax and rendering semantics.