CSS color-mix() playground

Explore color-mix() by adjusting the color space, two colors, and their percentages. In polar spaces such as hsl, hwb, lch, and oklch you can also change hue interpolation and see the browser-resolved color in the generated code.

color-mix()

HTML

<div class="color-mix">color-mix()</div>

CSS

.color-mix {
  display: grid;
  place-items: center;
  min-inline-size: min(100%, 18rem);
  min-block-size: 12rem;
  background-color: color-mix(in srgb, #ff7a8a 50%, #6fd6ff 50%);
}