w3c / w3c/csswg-drafts

[css-color-6] `color-extract()` function to extract individual color components

Open
#6,937 8 comments 15 reactions 1 assignee View on GitHub

@svgeesus is already working on this.

Since Aug 28, 2024.

css-color-6 Needs Edits
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

In #5782, I discussed how we need ways to extract individual components so that authors can do truly custom things with colors.
While the Relative Color Syntax (RCS) offers maximum flexibility when it comes to a single color, we still don’t have a way to generate colors from color channels of more than one color. E.g. the hue and chroma of colorA and the lightness of colorB or the color of colorA and the alpha of colorB (didn't we have a CSS WG resolution that needed this?). The old syntax of color-mix() could do some of that, but in a rather confusing and awkward way, so we had decided to axe it in favor of a future syntax to cover these use cases.

Early thoughts about this centered around having separate functions (e.g. lch-hue()), possibly added on a use case basis.

However, I now think we should instead introduce a single color-extract() (name TBB) function that extracts any color component, from any color space.

Potential syntax could be color-extract(<color-space> <component> from <color>). Return value is identical to the value of <component> in the corresponding color function's RCS.

Reasoning:

  • Return values, color space ids, and component names are all well defined already by existing syntax, so incremental implementation and spec effort would be relatively small
  • The main argument against a generic function is its verbosity, but given that all common use cases are covered by RCS and color-mix(), this is reserved for the niche use cases, which could use more verbose syntax.
  • Since all components of this syntax refer to existing tokens, the syntax is automatically updated for new color spaces, or even custom ones.

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.