Color Functions

Adds two new functions: color-mix(), color-contrast() and extends the existing ones with a relative color syntax.

• The color-mix() function allows you to mix two colors in a given color space.

.text-primary-dark {
  color: color-mix(var(--theme-primary), black 10%);
}
.text-primary-darker {
  color: color-mix(var(--theme-primary), black 20%);
}

• The color-contrast() function allows you to select the best color from a list of colors that meets or exceeds the contrast criteria compared to a given base color.

/* Compares wheat against tan, sienna, and #d2691e */
/* Sienna will be selected as it has a contstast of 4.273 
against wheat, which exceeds the threshold of AA-large (3) */
color-contrast(wheat vs tan, sienna, #d2691e to AA-large)

• With the relative color syntax, you can manipulate and convert any color to any format.

:root {
  --color: #ff0000;
}

.selector {
  /* change the transparency */
  color: hsl(from var(--color) h s l / .5);
  
  /* change the hue */
  color: hsl(from var(--color) calc(h + 180deg) s l);
  
  /* change the saturation */
  color: hsl(from var(--color) h calc(s + 5%) l);
}

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

Simplify Your Color Palette with CSS Color-Mix()