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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. 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 …)

Join the Conversation

4 Comments

  1. How do I just add opacity to a color? I realize that’s easy to do, but I want to be able to do it to CSS variables. At the moment a lot of people store their color variables as just numbers, which I don’t like doing, just so they can change the opacity.

    1. “`
      :root {
      –brand-color: lab(56% -10 16 / 100%);
      }

      div {
      height: 100px;
      background-color: lab(from var(–brand-color) l a b / 50%);
      }
      “`

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.