MDN Blog: CSS color functions and color spaces

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:

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.