In March of this year, I was assigned a Firefox 111 release task to document lab()
, lch()
and color()
functions that were shipping in the stable release.
This was an interesting one for me to work on and I learned a lot of new things about color spaces, color science, and plenty about color in CSS.
It turns out that color in CSS is a pretty deep topic, and there’s lots of options for declaring and controlling colors that can improve how you code, and how your projects look (including better gradients):
If you want to see the docs I updated, here’s the links to the GitHub PRs I worked on:
- MDN Content: Relnote, examples, and docs for color functions
- Browser Compat Data: relnote(Fx111): color(), lab(), lch(), oklab(), oklch() support
It should be apparent that there’s plenty of new ways to specify colors:
MDN Blog, CSS Colors (Module 4)
If you want to read more about CSS Colors Module Level 4, I published a post on the MDN Blog that covers color spaces, hues, interpolation, and other interesting topics. Check it out if you’d like to read about:
- defining RGB colors in CSS
- understanding color spaces
- using HSL for choosing hues
- what’s new in CSS Colors Module Level 4:
- color spaces and gamuts
- new color functions (functional notation)
- syntax changes for existing color functions
- how gradients in different color spaces
- hue interpolation modes in gradients
Let me know what your thoughts are, what I missed, and if there are some fun ways to use these new features. Share your thoughts below or get in touch on Bluesky.
Published: