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 →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.