Relative Color Syntax — Basic Use Cases
August 14, 2024
As of last month, Firefox 128’s support of the relative color syntax means we’ve now got support across the board. I’m excited about that as it’s an extremely powerful way to manipulate colors in CSS. Plus it was part of Interop this year so that is further proof that is trucking along nicely.
Source: Relative Color Syntax — Basic Use Cases – Frontend Masters Boost
MDN tells us that
The CSS colors module defines relative color syntax, which allows a CSS
value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.
Learn about their value in practice, like adding transparency to an existing color, or darkening a color, all within CSS without changing your existing color definitions.
