#894: Relative Color Syntax (RCS)

Visit on Github.

Opened Sep 6, 2023

こんにちは TAG-さん!

I'm requesting a TAG review of Relative Color Syntax (RCS).

The new relative color syntax extends modern color syntax to allow existing colors to be modified using the color functions: if an origin color is specified, then each color channel can either be directly specified, or taken from the origin color (and possibly modified with math functions). For example:

lab(from magenta calc(l/2) a b)

Would create a lab color that is equivalent to magenta with half of the lightness.

Further details:

  • I have reviewed the TAG's Web Platform Design Principles
  • The group where the work on this specification is currently being done: csswg-drafts
  • Major unresolved issues with or opposition to this specification: None
  • This work is being funded by: Google

Discussions

Comment by @LeaVerou Sep 6, 2023 (See Github)
  • Primary contacts (and their relationship to the specification):

Hi there,

Curious why list only 2 of the 4 editors of the specification as primary contacts? Especially since the editor who actually proposed and specced the feature is among the 2 that were left out.

Comment by @mysteryDate Sep 6, 2023 (See Github)

Curious why list only 2 of the 4 editors of the specification as primary contacts? Especially since the editor who actually proposed the feature is among the 2 that were left out.

I was trying to keep it brief and just listed the two authors with whom I'd actively been in contact. Would you like me to add the other two to the original issue post?

I also wasn't sure what organization to list for you, Lea, as you are listed as an "Invited Expert" on the spec.

Comment by @ZoeBijl Sep 6, 2023 (See Github)

Is there an explainer for this that’s not a blog post?

Comment by @myakura Sep 7, 2023 (See Github)

Is there an explainer for this that’s not a blog post?

unfortunately not. https://groups.google.com/a/chromium.org/g/blink-dev/c/KeKBTjKEdaU

Comment by @mysteryDate Sep 7, 2023 (See Github)

Is there an explainer for this that’s not a blog post?

@LeaVerou Was there an explainer that you all were working from when the spec was first written? This is not the first time that someone has wanted something more official. I could write one now, but that would feel a little post-hoc and I feel like I am far from the most knowledgable person on the subject.

Comment by @LeaVerou Sep 7, 2023 (See Github)

Is there an explainer for this that’s not a blog post?

@LeaVerou Was there an explainer that you all were working from when the spec was first written? This is not the first time that someone has wanted something more official. I could write one now, but that would feel a little post-hoc and I feel like I am far from the most knowledgable person on the subject.

No, but it should be pretty easy to put one together with the info from the original proposal (which includes motivation, use cases, etc) and the updated proposal which converged on the sytnax that is currently in the spec.

I believe the differences between the current syntax and the (updated) proposal are:

  • Using a gamut-restricted color function does not clip or gamut map anymore
  • RCS for color() is now much more fleshed out than it was there.
  • The return types for each keyword are now more fleshed out, defaulting to <number> when that is allowed for the corresponding component.

@svgeesus, am I forgetting any?

Comment by @miketaylr Sep 8, 2023 (See Github)

The above comment and its links is as useful as an explainer; it doesn't seem worth the effort to write a new one (but if someone is really inclined to, more power to them).

Comment by @LeaVerou Sep 8, 2023 (See Github)

The above comment and its links is as useful as an explainer; it doesn't seem worth the effort to write a new one (but if someone is really inclined to, more power to them).

I disagree, the whole point of explainers is that they are easy to digest, piecing the info together from several links and cross-referencing with the spec is not work that whoever is reviewing the explainer should need to do.

I would love to do the work of putting an explainer together, but I can't commit to a specific timeframe right now, and I don't want to become the bottleneck here.

Comment by @svgeesus Sep 8, 2023 (See Github)

The other useful item that an explainer would provide is evidence of implementer support, so:

Comment by @svgeesus Sep 8, 2023 (See Github)

Oh btw @mysteryDate

Would create a lab color that is equivalent to magenta with half of the luminance

Half the lightness. See this diagram

Comment by @svgeesus Sep 8, 2023 (See Github)

Ok here is a somewhat minimal RCS Explainer

Comment by @mysteryDate Sep 9, 2023 (See Github)

Exellent, thank you! I have updated the original comment to add the two missing authors, link to the new explainer and swap "luminance" for "lightness."

Comment by @svgeesus Sep 19, 2023 (See Github)

I added tests for RCS with currentColor which currently no-one passes, but the spec clearly describes what should happen so hopefully the implementations will converge to interop on that aspect.

Discussed Dec 18, 2023 (See Github)

Dan: explainer provided

Amy: multistakeholder is positive. Mostly shipping.

Amy: on a surface level it looks fine...

we think this is probably fine - but need to double-check it with TAG CSS exprerts

Comment by @svgeesus Dec 19, 2023 (See Github)

Mozilla position on RCS is positive with implementation starting soon

Comment by @rhiaro Dec 20, 2023 (See Github)

Thanks for the explainer updates, no concerns from us. :rainbow: