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


  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.