github color-js/color.js v0.6.0
on GitHub

9 hours ago

This has taken a while and three pre-releases, but we wanted to make sure we got everything right.
This is likely to be the last v0.x release, as Color.js is certainly mature enough to go to v1 in the next major version.
Speaking of maturity…

⬇️ Over 100 million downloads! 🤯

Color.js has now been downloaded over 114 million times on npm!
The rate of increase is still accelerating, currently at 3.5 million downloads per week!

We even had to automate updating the number in our README so we could have a chance to keep up (thanks @MysteryBlokHed!).

Making Color.js sustainable

You may have noticed we removed ads from the Color.js website a while back.
While Carbon ads were the good kind of ads (relevant, not intrusive), it was not really worth it, they barely made enough to cover costs like the domain name etc.

Instead, we have started an Open Collective that you can fund directly.
If your company depends on Color.js in any way, it is in your best interest to ensure its future is sustainable.

Once there are enough sponsors, we plan to feature them prominently on our website and README, so if you want to be among the first ones to get your name in there, now’s the chance:

Breaking changes

There are a number of breaking changes in this release, but they should only negatively affect some pretty specialized use cases.

null instead of NaN to represent none values

As announced in v0.5.0, we have now switched to using null instead of NaN to represent none values (naturally occurring when converting achromatic colors to certain color spaces).
Not only is null conceptually closer, but since CSS also now has a NaN value, this change allows us to represent it properly, using an actual NaN value.

NaN continues to be parsed (and becomes NaN in JS). Instead of being serialized as NaN (which is invalid in CSS), it is serialized as calc(NaN) which is a valid CSS coordinate. For roundtripping to work properly, this also means we now parse calc(NaN) as well. Slippery slope? We’ll see. 😁

(by @LeaVerou in cdf6f0d, @facelessuser in #476, @MysteryBlokHed in #530)

Programmatically detecting how none is represented

If you are working with any code that needs to handle Color instances/objects generically, without knowing which version of Color.js they come from, you can detect which value is being used and use that instead of a hardcoded null or NaN: 

let noneCoord = new Color("rgb(none none none)").coords[0];
const NONE_VALUE = noneCoord?.valueOf() ?? noneCoord;

Plain numbers instead of Number objects for coordinates

Previously, coordinates would be parsed into Number objects so they could retain metadata about their parsing. From this release onwards, they are plain number primitives, which results in both performance improvements, and improved DX for most cases.

Instead, parsing metadata is passed around as a separate object, and stored on Color instances under color.parseMeta. This happens automatically in the OOP API, but users need to explicitly opt-in when using the procedural API, since that is optimized for high performance use cases.

In addition, this metadata is now far more elaborate and can pretty much recreate the format parsed. Which brings us to…

Colors now reserialized in the format parsed

We heard you! This has been a longstanding pain point, and it is now fixed. If you’re parsing a hex color, it will be serialized back to a hex color by default. If you’re specifying your chroma in percentages, percentages you’ll get back. If for some reason, you’re parsing a legacy comma-separated color, lo and behold, you can modify it and get back a legacy comma-separated color without lifting a finger!

Caveats:

  • This only happens automatically in the OOP API. The procedural API does not store parsing metadata by default as it’s optimized for speed, you need to pass a parseMeta object explicitly.
  • You can always override this by passing format (or format: "default") for the color space default, which gives you the previous behavior.

Other big improvements

New color spaces

More control over serialization

You can now specify a format from any color space in serialize()/color.toString() without having to convert the color to a different color space.
There is even a new function, ColorSpace.findFormat() to find a format that matches certain criteria across all registered color spaces.

Another big pain point was that the way Color.js did serialization made simple things easy (by having sensible defaults and a wide range of predefined formats) and complex things possible (by allowing entirely custom formats to be specified), but the in-between was not smooth at all: the moment you needed anything custom, the only way was to recreate a whole format, which is a UX antipattern.

Starting with this release, you can now specify a lot more granular options for serialization, without having to redefine a format:

  • coords with an array of coord types (e.g. ["<percentage>", "<number>[0, 100]", "<angle>"]). Any undefined values will just get the default type, so you can even do things like [, "<percentage>", ] to e.g. make OKLCh chroma a percentage without having to respecify the default type of any other coord.
  • alpha to control display and type of alpha:
    1. Force alpha to be added even when it’s 100%: alpha: true
    2. Prevent alpha from being added, even when < 100%: alpha: false
    3. Format alpha as a percentage: alpha: "<percentage>"
    4. Do both 1 and 3: alpha: {include: true, type: "<percentage>"}

Switching from TypeScript types to JSDoc

You may have noticed that our API docs had not been great in the past. This is because we were describing types in .d.ts files, but documentation was in JSDoc comments. However (the otherwise lovely) Typedoc expects a single source of truth for both, which would mean either having untyped API docs, or API docs with only types. It also meant that we had to maintain Color.js’s pretty extensive API in two places, which did not scale.

With this release we went all in on JSDoc, thanks to @MysteryBlokHed’s monumental effort in #540.
For complex types, we are still using .d.ts files with the new JSDoc @import syntax so that JSDoc is still the source of truth (by @MysteryBlokHed and @lloydk in #686).

This does not affect you, whether you are consuming Color.js via TS or JS, types should still just work. You may, however, see better inline documentation!

Other Color.js Initiatives

Color Apps

We have also moved our Color apps (which also serve as Color.js demos) into their own repo and domain: apps.colorjs.io.

If you have links to these, there’s nothing to worry about: the old URL still works (it just redirects to the new one).

There is also a new app:

These are rather esoteric, but they have been used in CSS Working Group research to help figure out what gamut mapping algorithm to use natively in CSS.

Color Palettes

Another experimental project under the Color.js umbrella is Color Palettes,
which aims to analyze designer-created color palettes in a variety of color spaces, as an attempt to understand how to generate them
and document what patterns are prominent.
You may (or may not) be surprised to find that they are not regular in any color space, not even perceptually uniform ones.

This project is still in its infancy (I would not even call it alpha), but we are excited about its potential.

Color Elements

You may have noticed our three experimental custom elements in the past — or maybe not, as they were very experimental and thus not featured very prominently.

These have now been split into a separate project, and a separate domain: elements.colorjs.io and expanded into a library of 10 web components for building color-related apps (the first library of its kind to our knowledge).
They are still very experimental, but way more polished than their previous state.

If you were referencing these from their previous URL, there is a redirect in place, but do note their tag names and API have changed.

Color Elements were originally developed for our own Color Apps and the Color Palettes project, so these projects also serve as demos for them.

Other changes

API changes

Color parsing & formatting

  • 🆕 New function: Color.try() / tryColor(): A common request has been a function that gracefully parses colors, without throwing if there is an error. This version adds exactly that: tryColor()/Color.try() (by @LeaVerou in #664)
  • Hate seeing numbers like 0.30000000000000004? Our default number formatting now attempts to limit IEEE 754 precision issues.
  • Improved number parsing (by @facelessuser in #508)
  • parse() now clamps alpha as well, just like the Color constructor (by @LeaVerou)

Color difference

  • New deltas() functions for getting coordinate/alpha differences between two colors in any color space. (@LeaVerou in #532)
  • New DeltaE method: OK2, believed to be more perceptually uniform (by @svgeesus in #486)

Getting and setting coordinates

  • get()/set()/setAll() now support alpha as well (by @LeaVerou)
  • getAll() now supports an optional options parameter object with space and precision as possible keys (by @DmitrySharabin in #548)

Exports

  • A common need was to use the procedural API for tree-shaking and performance, but still import all color spaces that Color.js supports. This is now made much easier, through the new spaces export of /fn and the new /spaces top-level export. (by @LeaVerou in #663, with types by @MysteryBlokHed in #668)
  • Functional API (colorjs.io/fn) now also available with ESM exports (by @MysteryBlokHed in #606)
  • New /src export to import Color.js's source code directly as ESM, when there is no suitable high-level export for what you need (by @LeaVerou in #663, with types by @MysteryBlokHed in #668)

Performance

  • Matrix transform performance improvements by @lloydk that make certain conversions 3x faster (#585 #588)

API changes for spec compliance

  • Longer and undefined/same hues now have parity with CSS spec (thanks @facelessuser in #474)
  • Change color(ictcp ...) to ictcp(...) per CSS Color HDR (by @svgeesus in #646)
  • Change color(jzazbz ...) to jzazbz(...), and color(jzczhz ...) to jzczhz(...) per CSS Color HDR (by @svgeesus in #647)
  • Unprefix display-p3-linear since it is now in CSS Color 4 (i.e. color(--display-p3-linear ...) → color(display-p3-linear ...) (by @svgeesus in c90fe38). Not a breaking change, as both are still supported.
  • Use gamma 2.40 for display-referred rec2020; rename previous implementation as scene-referred --rec2020-oetf (by @svgeesus in #669)
  • Make HSL parsing spec-compliant (by @kleinfreund in #650)

Docs

Website

  • Avoid style recalculation of all elements on each scroll event. It makes the experience of working with the website much smoother (by @Inwerpsel in #592)
  • Make the main navbar responsive (by @DmitrySharabin in #694)

Bug fixes

  • Object-oriented functions now work between different sources of Color.js (by @MysteryBlokHed in #605)

  • Fix serialization of negative percentages (by @lloydk in #554)

  • Handle negative square roots in a sane manner for Rec. 2100 HLG (by @facelessuser in #575)

  • Do not use HSL normalized saturation and hue for certain spaces (by @facelessuser in #582)

  • Avoid mutating arguments passed to the Color constructor (by @MysteryBlokHed in #603)

  • Fix parsing 7-character hex colors (by @kleinfreund in #616)

  • Fix parsing of percentage values for color spaces with coords that have a range property with a minimum value less than 0 (e.g. acescc) (by @lloydk in #619)

  • CAM16 and HCT hues are now correctly set to null when chroma is near zero (by @facelessuser in #644)

  • Fix issues with creating custom color spaces (by @sidewayss and @LeaVerou in #628)

  • Don't clamp negative values in Absolute XYZ D65 (by @svgeesus in #613)

  • Adjust calculations in Jzazbz and fix Jzazbz and JzCzhz reference ranges (by @svgeesus in #634 #635)

  • Ensure Prophoto and Rec2020 spaces handle negative values (by @lloydk in #640)

  • Don't throw for unknown coords when space accessors are used (by @LeaVerou)

  • In toGamut(), better handle the case when JND equals 0 (by @facelessuser in #659)

Improvements to types

  • colorSpace.isUnbounded property (by @lloydk in #503)
  • Fix types for setAll(), getAll(), toGamut(), deltas(), and add types for CSS color keywords (by @lloydk in #520 #544 #545 #546 #598)
  • Generate declarations from JS, remove module augmentation, and fix type errors in codebase (by @MysteryBlokHed in #564 #567 #574)
  • Overload multiplyMatrices types and update implementation to pass all tests (by @epsilonError in #580 #631)
  • Fix CAM16 and HCT type errors (by @lloydk and @MysteryBlokHed in #622)
  • Fix different types and type errors (by @lloydk in #642)
  • Fix space accessor types to allow null (by @lloydk)
  • Fix return types of the darken()/lighten() functions on the Color class (by @lloydk in #654)
  • Bump TypeScript to v5.5 and in type definitions, replace @typedef with @import where relevant to improve DX and overall quality of generated .d.ts files (by @MysteryBlokHed and @lloydk in #686)

For contributors

New Contributors

Full Changelog: v0.5.2...v0.6.0

Check out latest releases or
releases around color-js/color.js v0.6.0

Don't miss a new color.js release

NewReleases is sending notifications on new releases.

Get notifications