CSS color fallbacks

I'm confused by what the 'final' color would be in this instance:

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

source My understanding is the lab() will in over the display-p3 since it is last? I think the p3 should be last, or behind a media query. Any best practices?

Lightning CSS

An extremely fast CSS parser, transformer, bundler, and minifier.

3 Replies

Jochem•3mo ago

it will apply top to bottom like any CSS property, overwriting any previous definitions but only for properties it supports. So if all three are supported, you'll end up with the lab definition, otherwise if that is supported, the color definition, and finally a fallback to the hex color

tombyrer•3mo ago

thanks! I was thinking that P3 > OKLAB, due to the wider color gambut, or does OKLAB dip into P3/REC2000 if you let it?

Jochem•3mo ago

no idea tbh, but the order if it being applied has nothing to do with the type of color space you're using, only with the order of the arguments

Gaming

Programming

CSS color fallbacks