v3.0.0

[danburzo]

Breaking changes

This new release includes revamped color parsing to align with the latest css-color-4 spec. Regular expression matching has been replaced with a parser that follows the css-syntax spec more closely.

The new parser is more flexible with some aspects and stricter with others:

• Trickier whitespace formulas around numbers, such as rgb(1-.2.3), are now properly handled (Exotic rgb() syntaxes trip up culori.js #187)
• All non-legacy syntaxes allow of mixing <number>, <percentage> and 'none' component values
• The color() syntax no longer supports omitted component values that default to 0; it now requires exactly three component values. (color() syntax: don't allow omitted components #186)

Interpretation of component values has been aligned to the spec:

• in non-legacy syntaxes, percentages are mapped to a reference range for that component. For example, the range of lch.c (Chroma in the CIELCh color space) is [0, 150], with 100% corresponding to 150.

Serialization has also been aligned to the spec:

• lab and lch serialize the L component as <number>, not <percentage>
• oklab‌, oklch and lrgb are serialized to oklab(), oklch(), and color(srgb-linear) respectively.

Please consult the migration guide for assistance in upgrading from 2.x to 3.0.

API changes

• parseRgb and parseHsl now perform parsing of the modern syntax for rgb() and hsl() respectively;
• parseRgbLegacy and parseHslLegacy have been added to parse the legacy syntaxes for rgb() / rgba() / hsl() / hsla()
• parseOklab and parseOklch have been added to parse oklab() and oklch().

---

This discussion was created from the release v3.0.0.

[prjctimg]

This is great! Will there be a feature for explicitly accessing a single channel from a color object similar to Chroma.js chroma(color).get('lch.l) which returns the specified channel's value.

[danburzo]

Thanks, @prjctimg! In general we've left nice-to-have abstractions to userland code, when they're not hard to implement. A function like the one you mention could be achieved with:

function get(color, component) {
  const [mode, channel] = component.split('.');
  return culori.converter(mode)(color)?.[channel];
}

get('tomato', 'lch.l');
// => 62.99090584103958 

This would probably go in a recipes section on the website.

[prjctimg]

Awesome! I'll be sure to check up on the API as of v3. Had used Culori side by side with chroma-js because I couldn't implement some of the functionalities I required myself.

I'm working on a smallish library that does all sorts of tricks with color. Its still in the infancy stage. I'm using Culori as the core dependancy for the functionalities. I'm still migrating from Chroma.js in favor of a more functional approach to the codebase.

Please take a peek at https://github.com/prjctimg/huetiful

[danburzo]

Very cool! Good luck with the rewrite! :-)

[meodai]

thanks so much for your relentless work!