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

Bramus!4/28/21About 2 minCSSArticle(s)blogbram.uscss

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: 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%); } ... CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(--theme-primary) vs white, … Continue reading ”Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()”

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

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%);
}
...

CSS color-contrast, e.g.

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

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.

Info

Create a color theme with these upcoming CSS features

Safari Technology Preview added support to three new CSS color features that are coming soon to other...

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