[csswg-drafts] [css-color] Fallback color in @color-profile that uses RCS (#6767)

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

== [css-color] Fallback color in @color-profile that uses RCS ==
There is the open question of what to do if a color profile fails to load, cannot be decoded, or simply while it's loading. https://github.com/w3c/csswg-drafts/issues/6129 contains the existing discussion on this. 

Some implementors have expressed a reluctance to implement `@color-profile` because they do not want something as basic as colors to depend on an HTTP request. So, a good fallback strategy is essential for getting this rule implemented.

This is to propose another idea, which serves both as a fallback strategy, but also as a separate feature in its own right.

A **mandatory** `fallback-color` descriptor for `@color-profile`, which would accept any `<color>`, as well as support [Relative Color Syntax](https://drafts.csswg.org/css-color-5/#relative-colors) with the components that the `components` descriptor has defined for the current color space.

In its most basic form, it can be a solid color, though that should be discouraged, for accessibility:

```css
@color-profile --fancy {
 src: url('...');
 components: foo, bar, baz;
 fallback-color: red;
}
```

It can be used to define a fallback color space, e.g. in this case display-p3:

```css
@color-profile --fancyrgb {
 src: url('...');
 components: r, g, b;
 fallback-color: color(display-p3 r g b / alpha);
}
```

But, most importantly, if there's no good fallback color space, it can be used to define a **mapping** to an existing space:

```css
@color-profile --fancyrgb {
 src: url('...');
 components: r, g, b;
 fallback-color: color(display-p3 calc(r * .8) calc(g * .8) calc(b * .8));
}

@color-profile --betterlch {
 src: url('...');
 components: l, c, h;
 fallback: lch(calc(l / 100) calc(c / 300) h / alpha);
}
```

And, bonus, if we make the `src` descriptor optional, it can even be used to define custom color functions!

```css
@color-profile --brand-red {
 components: l;
 fallback: lch(l 40 20 / alpha);
}

/*  use like color(--brand-red 40) or color(--brand-red 50 / .4) */
```

(in which case maybe we should rename it to something more generic like `@color-space` or simply `@colors`)

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


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

Received on Tuesday, 26 October 2021 12:46:41 UTC