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
- the basics of how
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
- Fx113: CSS Color lvl 4 features are enabled by default
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 :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 Mastodon.
