-
Notifications
You must be signed in to change notification settings - Fork 35
v3.0.0 #192
-
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 (Exoticrgb()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 to0; 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], with100%corresponding to150.
Serialization has also been aligned to the spec:
labandlchserialize theLcomponent as<number>, not<percentage>oklab,oklchandlrgbare serialized tooklab(),oklch(), andcolor(srgb-linear)respectively.
Please consult the migration guide for assistance in upgrading from 2.x to 3.0.
API changes
parseRgbandparseHslnow perform parsing of the modern syntax forrgb()andhsl()respectively;parseRgbLegacyandparseHslLegacyhave been added to parse the legacy syntaxes forrgb()/rgba()/hsl()/hsla()parseOklabandparseOklchhave been added to parseoklab()andoklch().
This discussion was created from the release v3.0.0.
Beta Was this translation helpful? Give feedback.
All reactions
-
🚀 1
Replies: 2 comments 3 replies
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
🚀 1
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 1
-
Very cool! Good luck with the rewrite! :-)
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
thanks so much for your relentless work!
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 1