"In my previous article on colours, I dove into the practical side of the new colour features for developers who primarily copy and paste values from a design file into their editor. With all the new colour features that we have in CSS now, we can do more with colours in the browser than designers can do in their design apps, and it opens up a whole world of possibilities."
"The most important part of the above example is that the h s l letters aren't just letters, they are variables which contain the hue, saturation, and lightness values of the original colour. We can replace those letters with a value. For example, #00ff00 has no blue in it, so we could add some by replacing the b (which in this case is 0), with a number to add some blue in:"
"This works, but only if you know how much blue the original colour had to start with. Hard-coding 25 in there might increase the blue, but say we had #00ff55, it would decrease the value instead. The real power comes when we use calc(). While I'm using rgb() above, in general I find it hard to work with. Instead, I tend to stick with hsl() and oklch(), where it can be a lot more useful."
CSS now includes colour features that allow more advanced manipulation in the browser than traditional design apps. Relative colour syntax exposes hue, saturation, and lightness as variables that can be modified directly. Developers can replace component letters with numeric values, but absolute replacements depend on the original colour components. Using calc() enables reliable, relative adjustments so modifications behave consistently across different base colours. HSL() and OKLCH() are more practical for these operations, with hue values wrapping past 360 degrees to rotate around the colour wheel. These techniques support generating complementary, tertiary, lighter, darker, and surface-level colours dynamically.
Read at Piccalilli
Unable to calculate read time
Collection
[
|
...
]