Skip to main content

CSS color-mix() Builder

v1.0.0

Helper for the CSS color-mix() function — pick colour spaces, ratios, see live output.

color-mix() CSS
:root {
  --blend-25: color-mix(in oklch, #1a73e8 25%, #ea4335);
  --blend-50: color-mix(in oklch, #1a73e8 50%, #ea4335);
  --blend-75: color-mix(in oklch, #1a73e8 75%, #ea4335);
}

/* Single value */
.element {
  color: color-mix(in oklch, #1a73e8 50%, #ea4335);
}

/* Transparent tint (using with currentColor) */
.element {
  background: color-mix(in oklch, #1a73e8 50%, transparent);
}

/* Browser support: Chrome 111+, Safari 16.2+, Firefox 113+ */
/* Perceptual recommendation: use oklch or oklab for even mixes */