Clean Markup

Dynamic Palette Generation in CSS with color-mix and Perceptual Color Spaces

Dynamic Palette Generation in CSS with color-mix and Perceptual Color Spaces

Creating accessible hover tints, active shades, and translucent badges traditionally required precomputing hex values in Sass (lighten(), darken()) or shipping bulky JavaScript color conversion helpers.

The CSS Color Module Level 4 color-mix() function allows blending two arbitrary colors directly in CSS across perceptually uniform color spaces like oklab and lch.

Example 

:root {
  --brand: #04ae92;
  /* Mix 80% brand color with 20% white in the oklab space */
  --brand-tint: color-mix(in oklab, var(--brand) 80%, #ffffff);
  /* Generate a subtle background badge tint */
  --brand-subtle: color-mix(in oklab, var(--brand) 12%, transparent);
}

Implementation 

.btn-primary {
  background-color: var(--brand);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  transition: background-color 150ms ease;
}

.btn-primary:hover {
  background-color: color-mix(in oklab, var(--brand) 85%, #000000);
}

Main Point: color-mix() enables runtime palette interpolation and theme generation directly in CSS without Sass preprocessors or color calculation scripts.

Credits

Photo by Evie S. on Unsplash

← Home