Support OKLCH color space

[benphelps]

Lightweight Charts™ Version: 4.0.1, 4.1.1

The OKLCH color space has recently been introduced into all modern browsers, and while the colors work in some places, some places they do not. Here is one example of such a place.

Steps/code to reproduce:

var series = chart.addAreaSeries({
  topColor: 'oklch(0.6569 0.196 275.75)', // this is fine
  bottomColor: 'rgba(0, 150, 136, 0.04)',
  lineColor: 'oklch(0.6569 0.196 275.75)', // this is NOT fine
  lineWidth: 2,
});

Actual behavior:

Uncaught Error: Cannot parse color: oklch(0.6569 0.196 275.75)
    at colorStringToRgba ...

Expected behavior:

Handle the new OKLCH color space everywhere.

colorStringToRgba in src/helpers/color.ts seems to be where the conversion is done.

Here is a fork adding support, however since I have no knowledge around color spaces, the conversion code is directly from ChatGPT, and I don't feel comfortable submitting that as a PR. I have tested it with a few colors, comparing to the values given by https://oklch.com/ and it does seem to function correctly, even for values outside of the RGB color space.

https://github.com/benphelps/lightweight-charts/tree/oklch

CodeSandbox/JSFiddle/etc link:

https://jsfiddle.net/ykpg8v7c/

[SlicedSilver]

Thanks for raising this issue @benphelps.

Converting oklch colours into RGB would add support to the library for the colour syntax but it wouldn't allow the support of actually displaying the expanded colour palette (such as P3 colours).

I'll adding this issue to our milestone for an upcoming release so we will have a look at implementing this support but I wouldn't expect it to land in a released version within the near future. In the meantime, you could handle the conversion outside of the library, and only provide the rgb strings to the library.