---
title: "CSS hues with hsl()"
date: "2023-06-30"
description: "This post describes what hues are, why you might use them, and other practical hints to get started with hue() in CSS."
author: "Brian Smith"
canonical: "https://bsmth.de/mdn-blog-hues-using-hsl/"
tags: ["CSS","MDN","Baseline"]
---

# CSS hues with hsl()

After deep-diving into color functions like `lab()`, `lch()` and `color()`, I realized that hue was actually a great topic to update across MDN Web Docs.
I am pretty happy with the outcome and there was a lot of interesting findings, updated pages, and new examples that should help beginners get started using hues in CSS.

```css
#color-wheel {
  border-radius: 50%;
  background: conic-gradient(
    in hsl longer hue,
    hsl(0deg 100% 50%),
    hsl(360deg 100% 50%)
  );
}
/* For browsers that don't support hue interpolation methods */
@supports not (background: conic-gradient(in hsl longer hue)) {
  #color-wheel {
    background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
  }
}
```

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

If you want to learn about hue in CSS, the [post on the MDN Blog](https://developer.mozilla.org/en-US/blog/learn-css-hues-colors-hsl/) describes what hues are, why you might use them, and other practical hints to get started.
Check it out if you'd like to read about:

- what hues are and why they're useful
- how to use `hsl()` including:
  - the basics of how `hsl()` works
  - playing with hues in CSS
  - seeing how to control saturation and lightness
  - using variables to change hues in multiple places

## MDN Web Docs hue updates

If you want to see the specific PRs I worked on (mostly relating to CSS Colors Module Level 4) here's the GitHub links:

- **Hue:** [docs(CSS): add examples of hue interpolation methods, add hue page](https://github.com/mdn/content/pull/25350)
- **Fx111:** color(), lab(), lch(), oklab(), oklch() support
  - [MDN Content](https://github.com/mdn/content/pull/25015) & [Browser Compat Data](https://github.com/mdn/browser-compat-data/pull/19035)
- **Fx113:** CSS Color lvl 4 features are enabled by default
  - [MDN Content](https://github.com/mdn/content/pull/26298) & [Browser Compat Data](https://github.com/mdn/browser-compat-data/pull/19426)

You should see plenty more support information and lots more colorful examples on MDN that I hope inspire readers:

```html
<div id="container"></div>
```

```js
const container = document.getElementById("container");
const loopLength = 80;
// Loop to create 40 div elements
for (let i = 0; i < loopLength; i++) {
  const divElement = document.createElement("div");

  divElement.id = `hsl-${i + 1}`;

  // Calculate the background color based on the loop index
  const hue = Math.round((i / loopLength) * 360);
  const saturation = 50;
  const lightness = 50;

  divElement.textContent = `hsl(${hue} ${saturation} ${lightness})`;
  divElement.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;

  // Append the div to the container
  container.appendChild(divElement);
}
```

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

I already mentioned in the MDN blog post, but I'd like to give a shout out to [Yarusome](https://www.github.com/yarusome) who did a really nice job adding diagrams that explain hue interpolation methods. Big thanks for adding more colors :pray:

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