Skip to content

v1.5.0
Compare
Choose a tag to compare
@devongovett devongovett released this 02 Mar 15:31
· 470 commits to master since this release
v1.5.0
6e70464

This release adds support for the CSS Color Level 4 spec, which enables many new ways to define colors including high gamut (e.g. HDR) color spaces. Currently, these are only implemented in Safari, but Parcel CSS can now compile them to older sRGB colors supported across all browsers automatically.

The supported functions are:

  • lab() and lch() – these are device independent color spaces which can represent the entire human visual spectrum. Currently supported in Safari 15.
  • oklab() and oklch() – an improved version of the lab and lch color spaces. Available in Safari TP.
  • color() – provides a way to use pre-defined color spaces such as Display P3 (supported since Safari 10), rec2020, and CIE XYZ. All specified color spaces are supported.

This screenshot shows the difference between sRGB and lab in terms of color gamut. The lab version is much more vibrant when displayed on modern hardware with high color gamut support.

image

Parcel CSS will compile these colors according to your browser targets. When a browser doesn't support them, duplicate fallback declarations will be created containing the equivalent sRGB color. The original color will also be included so that browsers that support it will get a higher color gamut. If a lower version of Safari is included that doesn't support Lab but does support P3, a Display P3 version will also be included as it includes a higher color gamut than sRGB.

For example:

.foo {
  color: oklab(59.686% 0.1009 0.1192);
}

becomes:

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

In addition, Parcel CSS also supports these colors when used within custom properties, or in declarations that use var() references. In these cases, fallbacks cannot be done with duplicate declarations in the same rule. Instead, Parcel CSS outputs a duplicate rule within an @supports block.

.foo {
  text-shadow: var(--x) lab(29.2345% 39.3825 20.0664);
  --foo: lab(29.2345% 39.3825 20.0664);
}

becomes:

.foo {
  text-shadow: var(--x) #7d2329;
  --foo: #7d2329;
}

@supports (color: color(display-p3 0 0 0)) {
  .foo {
    text-shadow: var(--x) color(display-p3 .451706 .165516 .1701);
    --foo: color(display-p3 .451706 .165516 .1701);
  }
}

@supports (color: lab(0% 0 0)) {
  .foo {
    text-shadow: var(--x) lab(29.2345% 39.3825 20.0664);
    --foo: lab(29.2345% 39.3825 20.0664);
  }
}

Try it out here.

To learn more about these new color spaces, check out this article, and play around with this lab color picker.

Assets 2