Dynamic CSS with Custom Properties (aka CSS Variables)

Dynamic CSS with Custom Properties (aka CSS Variables) Color: Present and Future

Learning Paths:
Check out a free preview of the full Dynamic CSS with Custom Properties (aka CSS Variables) course:
The "Color: Present and Future" Lesson is part of the full, Dynamic CSS with Custom Properties (aka CSS Variables) course featured in this preview video. Here's what you'd learn in this lesson:

Lea provides a brief summary of the color section so far and discusses the possible future of custom properties and colors including custom properties to store color and functions that manipulation colors. A brief discussion on the color-mix function is also covered in this segment.

Get Unlimited Access Now

Transcript from the "Color: Present and Future" Lesson

>> The landscape of color manipulation today in CSS, it's not ideal. We could use separate properties for hue saturation and lightness. Maybe hue and saturation can be stored together to save some repetition, some verbosity. We can have pre computed variations, at least that ensures consistency throughout our design, but it's more repetitive.

[00:00:22] And we could also have like separate background color, whatever, text color, whatever properties to create variations within a part of the HTML. None of this is ideal, but this is what we have right now. And of course, they can all coexist, they can all be used together as we've seen.

[00:00:46] However, things are going to get better. The future is colorful. In the future, we'll be able to have functions that manipulate color. These are already specified in CSS color level five, and they are actually implemented in Safari. There is a color mixed function, and actually Firefox also implements this color mix function just in a limited way, in a more limited way.

[00:01:15] Where you can specify a mixing color space and percentages of the colors that you're mixing. So you can create tints, you can like combine a color with white or combine a color with black, and create tints and shades. There is a relative syntax. Actually I proposed this a few years ago, so I'm very happy that it's finally starting to get implemented.

[00:01:37] There is a relative syntax that lets you specify a base color and then do math with all its components. And we'll also get better color spaces for adjustment as well like I can't wait for LCH to be available everywhere.