Add support for relative colors

[uhafner]

In the Jenkins project we are using oklch colors. In order to use such colors in Echarts I wanted to use your library to convert these oklch colors to rgb colors (see https://github.com/jenkinsci/echarts-api-plugin/pull/383). This works quite well for absolute colors like oklch(60% 0.2601 12.28), but for relative colors like oklch(from oklch(55% 0.2308 256.91deg) 2% 0.075 h) the call new Color(color).to("sRGB").toString({format: "hex"}); fails with an exception.

Is there a plan to support such relative colors as well?

[LeaVerou]

Hi there @uhafner! This is definitely in scope, though no idea when we might get to it. Meanwhile, as a workaround, you can use the color to set the color on a dummy element and then read back the computed style.

[facelessuser]

I'm curious on exactly how much 'relative' stuff Color.js plans to support. Does it plan on implementing its own support and logic for things like calc()? Or does it plan to keep relative support fairly simple?

[LeaVerou]

I'm curious on exactly how much 'relative' stuff Color.js plans to support. Does it plan on implementing its own support and logic for things like calc()? Or does it plan to keep relative support fairly simple?

That’s the million dollar question 😁 I don't have an answer right now. It's unclear how much utility that provides without variables, and the implementation effort involved is pretty significant. I'd be inclined to support this as a plugin, rather than part of core Color.js.

[svgeesus]

I'm curious on exactly how much 'relative' stuff Color.js plans to support. Does it plan on implementing its own support and logic for things like calc()? Or does it plan to keep relative support fairly simple?

Most real-world usage is indeed using calc(), var() and custom properties. That seems to be out of scope here.

However I would have no objection to supporting the plain nested relative colors. But I feel it could be a lot of work

[LeaVerou]

Actually, I've had an idea of how we could support this without dealing with the immense complexity: Support an element option on getColor()/Color.get() that will get the color through gCS() on that element if parsing fails. That will support not just relative colors, but also variables, currentColor, color-mix() and many future functions too.

Sure, it wouldn't help on Node.js, but it's something.

And while we're at it, we may as well support an option to prevent throwing which would solve #316 as well.