Color Shade Generation with CSS Variables: A Systematic Method

Question

Can we mimic the functionality of Sass's darken() function using CSS variables to generate shades of a defined color?

Approach Using Relative Color Syntax

CSS introduces "relative color syntax," which enables the following:

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

Here's how it works:

• --color-primary: Define the base color.
• --color-primary-darker: Darken the base color by 5% using hsl().
• --color-primary-darkest: Darken the base color by 10% using hsl().

Usage

Use these variables to style elements:

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

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

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

This approach allows you to define color shades dynamically without modifying the color variable, achieving the desired gradient effect with three shades.