MDN Blog: 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.

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:

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

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