Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()

Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview:

1. Relative color syntax, e.g.

   .bg-primary-100 {
     background-color: hsl(from var(--theme-primary) h s 90%);
   }
   .bg-primary-200 {
     background-color: hsl(from var(--theme-primary) h s 80%);
   }
   .bg-primary-300 {
     background-color: hsl(from var(--theme-primary) h s 70%);
   }
   ...

2. CSS color-contrast, e.g.

   .text-contrast-primary {
     color: color-contrast(var(--theme-primary) vs white, black);
   }

3. CSS color-mix, e.g.

   .text-primary-dark {
     color: color-mix(var(--theme-primary), black 10%);
   }
   .text-primary-darker {
     color: color-mix(var(--theme-primary), black 20%);
   }

All three features are part of the the CSS Color Module Level 5 spec and are a very welcome addition.

Create a color theme with these upcoming CSS features →