[csswg-drafts] [css-color] Custom color palettes (#5730)

Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color] Custom color palettes ==
The [`@color-profile`] at-rule currently has two possible descriptors, `src` and `rendering-intent`. It also has a name that is either `device-cmyk` or a custom `<dashed-ident>`. This name will be used to specify custom color profiles inside the [`color()` function].

The [`color()` function] supports named colors from profiles, although this is a feature not often used in [ISO 15076-1] / ICC color profile files. #817 It is unlikely that browsers will (initially) support fetching and using random ICC profiles from remote sources.

I wish one could specify color palettes with named colors within CSS, e.g. for [spot colors](https://en.wikipedia.org/wiki/Spot_color "Wikipedia: spot color"). Those would be tied to a particular color profile (and space). Therefore, custom properties would not be the proper solution, although they work:

~~~~ css
:root {
  --my-green: color(a98-rgb 98% 1% 1%);
}
foo {
  color: var(--my-green);
}
~~~~

This looks cleaner:

~~~~ css
@color-profile a98-rgb {
  src: url("adobe.icc"); /* invalid for predefined color profiles */
  green: 96% 2% 2%; /* specify existing CSS color names as descriptors */
  --my-green: 98% 1% 1%; /* custom color name */
}
foo {
  color: color(a98-rgb green);
}
~~~~

If the *default color profile* could be set by an inherited property, this would look even cleaner:

~~~~ css
:root {
  color-profile: a98-rgb; /* overrides `srgb` default */
}
bar {
  color: color(green);
}
~~~~

Current color names are specified in the default color profile and space, i.e. sRGB. They could be overwritten, but then perhaps only be used within the [`color()` function]:

~~~~ css
@color-profile srgb {
  green: 96% 2% 2%; /* specify existing CSS color names as descriptors */
}
foo {
  color: color(green); /* custom redefinition is used */
  background: green; /* custom redefinition is _not_ used */
}
~~~~

Instead of adding descriptors to the [`@color-profile`]  at-rule, there could also be a dedicated **`@color-palette` at-rule**.

~~~~ css
@color-palette --my-palette {
  green: 96% 2% 2%; 
}
@color-profile srgb {
  src: var(--my-palette);
}
~~~~

or

~~~~ css
@color-profile srgb {
  palette: --my-palette;
}
@color-palette --my-palette {
  green: 96% 2% 2%; 
}
~~~~

Alternatively, a new **`@color`** or **`@color-name`** at-rule could be introduced to define a named color depending on the active color profile:

~~~~ css
@color green {
  --my-palette: 1% 98% 1%;
  a98-rgb: 2% 96% 2%;
  cmyk: 60% 5% 60% 20%;
  cmykgov: 0% 0% 0% 0% 100% 0% 0%;
  monochrome: 78%;
}
~~~~

[`@color-profile`]: <https://drafts.csswg.org/css-color/#at-profile> "Specifying a color profile: the `@color-profile` at-rule"
[`color()` function]: <https://drafts.csswg.org/css-color/#color-function> "Specifying profiled colors: the `color()` function"
[ISO 15076-1]: <http://www.color.org/specification/ICC1v43_2010-12.pdf> "PDF of ICC 4.3, equivalent to the ISO standard"

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5730 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 November 2020 09:05:32 UTC