Playground de color-mix() en CSS

Explora color-mix() ajustando el espacio de color, dos colores y sus porcentajes. En espacios polares como hsl, hwb, lch y oklch también puedes cambiar la interpolación del hue y ver en el código el color resuelto por el navegador.

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