With those new functions outside of the rgb color space (lab, lch, …) we might need to change how our widget operates

At the moment, we can't manipulate those colors, picking something in the spectrum color box switches the value back to hexa
We might want to display a line to show the rgb space "borders". Having this might require us to shift to a canvas to render the color (which we might wanted anyway for showing contrast lines (Bug 1226069)

It might also be a good time to change our controls:

• we could add a control to switch between color units (and color spaces for color())
• we can only modify the hue and the opacity as "individual" components. We could have dedicated inputs for the different components instead
• with the new color 4 syntax, we can also offer those components to be % or regular "old" numbers
• have a simple button to copy the CSS stringified value to clipboard

Some resources:

• non optimal color pickers prevent adoptions of new color formats: https://chriscoyier.net/2023/02/01/hex-colors-arent-great-at-anything-except-being-popular/
• someone asking for % values: https://twitter.com/anatudor/status/1602988491691917312
• a color picker for different formats: https://colorjs.io/apps/picker/oklch (it's quite nice as there are warning UI displayed when a color can't be properly translated to rgb)

Just as example, look like best LCH/OKLCH color picker for now:
https://oklch.com/