---
title: "CSS color functions and color spaces"
date: "2023-05-05"
description: "I wrote docs and a blog post on MDN about color in CSS, color spaces, hues, interpolation, and other interesting topics."
author: "Brian Smith"
canonical: "https://bsmth.de/mdn-blog-css-colors-hues-functions/"
tags: ["CSS","MDN","Baseline"]
---

# CSS color functions and color spaces

In March of this year, I was assigned a [Firefox 111 release task](https://github.com/mdn/content/issues/24395) 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):

```html
<div class="hsl-named-longer">
  <p>HSL linear gradient</p>
</div>

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

```css
.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);
}
```

_There's a live preview of this example at <https://bsmth.de/mdn-blog-css-colors-hues-functions/>._

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](https://github.com/mdn/content/pull/25015)
- **Browser Compat Data:** [relnote(Fx111): color(), lab(), lch(), oklab(), oklch() support](https://github.com/mdn/browser-compat-data/pull/19035)

It should be apparent that there's plenty of new ways to specify colors:

```css
.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](https://developer.mozilla.org/en-US/blog/css-color-module-level-4/) 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](https://bsky.app/profile/bsmth.de).