How Can I Create CSS Color Shades Using Variables and Relative Color Syntax?

Creating CSS Color Shades with Variables

Achieving the functionality of Sass's darken() function within CSS variables is possible through the new relative color syntax.

Define the primary color variable (--color-primary) using any desired format. For each shade, use the hsl() function and calc() to adjust the lightness (l) component of the primary color. For instance, to create a 5% darker shade:

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

Similarly, create a 10% darker shade:

--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));

Assign --color-primary to the element's background. Then, apply --color-primary-darker and --color-primary-darkest to the hover, focus, and active states.

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

This approach provides flexibility in defining color shades and simplifies the process of creating consistent color schemes within a CSS variables system.

The above is the detailed content of How Can I Create CSS Color Shades Using Variables and Relative Color Syntax?. For more information, please follow other related articles on the PHP Chinese website!