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:
.more-color-functions {
color: hwb(194 0% 0% / 0.5); /* HWB (Hue, Whiteness, Blackness) */
color: lab(50% 40 59.5 / 0.5); /* LAB (Lightness, A-axis, B-axis) */
color: lch(52.2% 72.2 50 / 0.5); /* LCH (Lightness, Chroma, Hue) */
color: oklab(59% 0.1 0.1 / 0.5); /* Oklab (Lightness, A-axis, B-axis) */
color: oklch(60% 0.15 50 / 0.5); /* Oklch (Lightness, Chroma, Hue) */
}
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 Mastodon.
Published: