Working with hues in CSS with the hsl() function

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.

#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);
  }
}

If you want to learn about hue in CSS, the post on the MDN Blog 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
• Fx111: color(), lab(), lch(), oklab(), oklch() support
  • MDN Content & Browser Compat Data
• Fx113: CSS Color lvl 4 features are enabled by default
  • MDN Content & Browser Compat Data

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

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

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);
}

I already mentioned in the MDN blog post, but I’d like to give a shout out to Yarusome who did a really nice job adding diagrams that explain hue interpolation methods. Big thanks for adding more colors

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.

Published: June 30, 2023