[css-color] Custom color palettes

[Crissov]

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.
Update: If #6095 is accepted, support for color names from profiles will be removed.

I wish one could specify color palettes with named colors within CSS, e.g. for spot colors. Those would be tied to a particular color profile (and space). Therefore, custom properties would not be the proper solution, although they work:

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

This looks cleaner:

@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);
  background: color(a98-rgb --my-green);
}

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

:root {
  color-profile: a98-rgb; /* overrides `srgb` default */
}
foo {
  color: color(green); /* or just `green`? */
  background: color(--my-green); /* different from `var(--my-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:

@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.

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

or with a dedicated palette descriptor:

@color-profile srgb {
  palette: --my-palette;
}

Except, since this at-rule would need to be independent of the color profile, it should define its colors absolutely:

@color-palette --my-palette {
  green: color(srgb 96% 2% 2%); /* equivalent to classic rgb(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:

@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%;
}

[svgeesus]

This looks cleaner:

@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);
  background: color(a98-rgb --my-green);
}

It really doesn't look cleaner. It redefines an existing predefined space, linking to a color profile that is unavailable due to trademark and redistribution-licensing constraints, just to avoid using the already-existing color(a98-rgb 96% 2% 2%) syntax and to be able to stuff it into @color-profile even though it is not defining a new color space.

I don't like that syntax at all.

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

:root {
  color-profile: a98-rgb; /* overrides `srgb` default */
}
foo {
  color: color(green); /* or just `green`? */
  background: color(--my-green); /* different from `var(--my-green)` */
}

Overriding all existing colors that have been there since CSS1, with new meanings. A wonderful boon to readability.

If you want to propose a way to define a palette of named colors (and then use those names), please propose a different at-rule like @color-palette and don't try to overload colorspace definitions.

Also, as CSS Color 4 is undergoing stabilization prior to going to CR, please propose it for a later spec such as CSS Color 5 or a new css-color-palettes spec.

[svgeesus]

For a single color, taking part of your proposed syntax and expressing it with what we already have,

 --my-green: color(a98-rgb 98% 1% 1%); /* custom color name */

Your proposal should probably explain why the existing CSS Custom Properties are not sufficient.

[Crissov]

With Custom Properties and the color() function, authors can specify color variables that are tied to a specific color space or profile. Likewise, current predefined color keywords are all tied to sRGB.

Rethinking it, this issue is really about introducing universal (custom) color keywords that can be specified individually for different color spaces and profiles. They would then not be automatically converted from their original space to the one used, but use the manual definition if available.

Corporate Design Manuals frequently specify a color palette and provide equivalents for its colors in various media scenarios, e.g. screen, offset printing, wall paint and so on. The name the color is referred by stays the same, regardless of perceived or measured differences in the colors used.

For instance, W3C Blue is (or at l least was in 2004) equivalently:

• sRGB #005A9C
• CMYK: 100% Cyan, 56% Magenta
• Pantone: 100% Pantone 293C

brandpad.io and other sites will record equivalences like this:

Brandpad Green
HEX #00933C
RGB 0 148 60
CMYK 84 13 98 2
PMS 2426 U
RAL 6037