Platform bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1352757

Now that lab() and lch() got implemented, the Rules view should provide support for them as well.

Support for them is two-fold. One thing is to display a color swatch. The other one would be a color picker. As both color functions work in a different color space than sRGB, this probably requires a new color picker.

Sebastian

Note that lab() and lch() (as well as oklab() and oklch()) are still behind a pref, layout.css.more_color_4.enabled
But we should be able to start working on it, at least to show the swatch.

We might also need to handle those new functions for unit cycling (shift + click on the swatch)

Let's turn this into a meta and have individual bugs for each area we want to cover

FYI I'm enabling the more_color_4 pref by default in bug 1813497

(In reply to Tiaan Louw from comment #4)

FYI I'm enabling the more_color_4 pref by default in bug 1813497

Thanks for the heads-up!
We'll bump the priority a bit then so we can ship devtools support in the same release

Tiaan, I'll try to read the spec and understand what should be done in devtools to represent these new values, but since you worked on this, maybe you have ideas about it?

Do we need to update our color picker so people can pick color from those new color spaces?

The biggest thing about most of the new color spaces are that they can represent colors that are not in the sRGB gamut (the colors that our monitors can display). So if you have red rgb(255 0 0) and convert to Lab, you get lab(54.29 80.82 69.9), but you can get "even more red" with Lab and go to lab(56.69 92.92 99.17). This last color can not be represented in sRGB. How this affects the gradients in the picker, I'm not entirely sure.

These are the basic categories of colors after the change:

• Lab/Oklab (Lightness, a, b): Lightness which is similar to a brightness slider, where 0% fades to black and 100% fades to white. a is a "green to red" slider and b is a "blue to yellow" slider.
• Lch/Oklch (Lightness, chroma, hue): Lightness is the same as for lab/oklab. chroma is similar to saturation and hue is good old hue.
• XYZ (color(xyz ..), color(xyz-d50 ..), color(xyz-d65 ..)): This color space can represent any color in any color space.
• All others(rgb(), color(..)): They are RGB based, except they can represent colors outside of sRGB gamut as mentioned.

If we want to change the way the picker functions, I think lab/lch is where we can "innovate", but for the rest I think the current implementation should be good (keeping the gamut issue in mind).

Current Chromium implementation shows a little line where the sRGB color spaces ends. You can also switch to any other color space from the picker. Once you have a color outside of sRGB, they show a little warning to indicate you can't convert back to sRGB based format.

Sample of how Lab functions: https://colorizer.org/
Some inner working of how Lab works:: http://color.support/coloratlas.html
Sample of how Lch functions: https://css.land/lch/

Thanks a lot for the information! I filed Bug 1814575 for the color picker work
Is there something in the platform already that can take a color string and return the different components in an other format?
Something like InspectorUtils.colorToRGBA , but that would take a format as second parameter (and color space as third, if color is passed for the second I guess?), e.g.

InspectorUtils.colorTo("oklch(0.63 0.4 110)", "rgb") // returns an object with r,g,b,a + a flag telling that the conversion had to be corrected
InspectorUtils.colorTo("tomato", "color", "xyz-d50")

We already have code to switch between color formats in DevTools, but if that's something that exists (or is easier to do) on the platform side, that would be really neat

Right now there is no such function on the platform side, but going forward I would prefer to use those conversion functions in stead of using a different implementation on the client side. I added bug 1815186 for this. It will require a bit more work on the color side.

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

I've made changes to get this colorTo function working in bug 1815186. There is a patch waiting. Maybe you want to have a look before I land it?