Support for CSS Level 4 Color Syntax (e.g. oklch(), space-separated hsl(), etc)

[dmitrystas]

Feature Proposal

Description:

Chart.js currently doesn't have full support for modern CSS Level 4 color formats, like:

oklch(.623 .214 259.815)
color(display-p3 0.27 0.49 0.99)
hsl(216.89 100% 59.61% / 90%) (space-separated notation)

etc.

While these formats are increasingly supported across modern browsers and work fine within Chart.js when used directly as solid colors, they fail in some scenarios - for example, in animations:

animation: {
  numbers: { duration: 0 },
  colors: {
    type: "color",
    duration: 1000,
    from: "transparent",
  }
}

You can see the issue in action here: https://codepen.io/jwvqbbzv-the-looper/pen/RNWWzaG

Feature Request:

Please consider adding support for CSS Level 4 color formats, including oklch(), lab(), color(), and the updated space-separated hsl()/rgb() notation. Native browser support is already quite strong, and support in Chart.js would greatly improve flexibility and modern color handling.

Why it's important:

These formats are increasingly standard and used in modern CSS workflows.

They allow for perceptual color spaces (oklch, lab) and better control for accessibility and color contrast.

Currently, Chart.js users must work around limitations or avoid using animations with modern colors altogether.

Thank you!

Possible Implementation

No response

[dmitrystas]

Please note that by support for formats like oklch, I don’t mean adding a conversion layer that transforms oklch into rgb and then works with the RGB value internally. What I’m referring to is treating oklch as a first-class input and working with it directly. Otherwise, it doesn’t make much sense — I can already convert oklch to rgb or hex myself and pass the result to Chart.js, but that would defeat the purpose and strip away the advantages of modern color spaces

[LeeLenaleee]

It seems like these types of colors are limited to CSS only and not yet valid inputs for the canvas API.
So I think it is better to look at this once the canvas API itself supports these inputs because currently we would need to convert them to an RGB value first.

[ecstrema]

It seems like these types of colors are limited to CSS only and not yet valid inputs for the canvas API.

Really though? I've been using colors like color-mix(in oklab, ${color} ${alpha}, transparent) where color is an oklch color in canvas for a while, and it's never been an issue.

minimal reproduction

I've tested the reproduction in edge and firefox. How do you know it is only valid in css but not in the canvas API?

[ecstrema]

Also, the web has great interpolation now. You don't need to convert anything to rgb internally. You can use this color-mix(in oklab, ${color1}, ${color2}) directly for animations, and it should work.

Is there another reason for converting the colors to rgb?

[ecstrema]

A dropped color dependency would be great.