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):

<!--pen:pen_id_hsl-one-->
<div class="hsl-named-longer">
  <p>HSL linear gradient</p>
</div>

<div class="lch-named-longer">
  <p>LCH linear gradient</p>
</div>

/*pen:pen_id_hsl-one*/
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}

.lch-named-longer {
  background: linear-gradient(to right in lch longer hue, orange, yellow);
}

/*pen:pen_id_hsl-one hidden*/
body {
  margin: 1rem;
  font-family: sans-serif;
  font-size: x-large;
  font-weight: bold;
  color: white;
}

div {
  outline: 4px dashed cornflowerblue;
  margin-bottom: 1rem;
}

p {
  padding: 1rem;
}

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 Bluesky.