PHPnews.io

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

Written by Bram.us / Original link on Apr. 27, 2021

css-color-level-5.png

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 →

bram bram bram tutorialzine link bram

« Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock - A first look at CQFill, a Polyfill for CSS Container Queries »