Color in CSS: Using New Spaces, Functions, and Techniques to Make your Site Shine

A presentation at NERDSummit 2024 in in Amherst, MA, USA by Aubrey Sambor

When working with color on the web, we’ve always had a few choices: HEX, RGB, and HSL. In recent years, however, the color level 4 specification introduced a few newcomers: HWB, LCH, okLCH, LAB, and okLAB. What are these new color options, and what do they add to variety of color choices we already have? Let’s get nerdy about colors and the options we have today.

In this talk, I will discuss

  • An overview of color spaces available today
  • What’s new in the CSS Color Module Levels 4 and 5
  • New CSS color functions and how to use them
  • Using CSS custom properties to change the values of color items within a color space (and a better way to do this!)
  • Ways to make your site are more accessible by using light-dark and color-contrast

Attendees will come away from this session with a deeper knowledge of the new color spaces and CSS color functions to make adding color to your site even easier!