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"></div>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<div class="inline-[250px] block-[250px] bg-[color-mix(in_srgb,_#ff7a8a_50%,_#6fd6ff_50%)]"></div>

CSS

.color-mix {
  inline-size: 250px;
  block-size: 250px;
  background-color: color-mix(in srgb, #ff7a8a 50%, #6fd6ff 50%);
}