Playground de color-mix() en CSS

Guía educativa de color-mix()

Mezcla colores con intención

color-mix() calcula un nuevo color a partir de otros. El espacio de interpolación, los pesos y el alfa determinan el resultado; el fondo sobre el que se pinta determina su apariencia final.

Volver al playground

Modelo mental

Primero se calcula el color; después se compone sobre el fondo.

Colores y pesos
Dos colores al 25% y 75% aportan cantidades distintas. Su alfa también participa.
Espacio y recorrido
Los colores se convierten al espacio elegido. En uno polar, el tono sigue una ruta angular.
Color y fondo
El resultado puede tener transparencia. Al pintarlo, se combina con el fondo real.

De los argumentos al color pintadoEsquema estático de una mezcla de dos colores. Las muestras de las secciones siguientes usan CSS nativo; este diagrama explica el proceso.

Un valor, no un efecto de capa

color-mix() devuelve un color. mix-blend-mode combina un elemento con su fondo mediante modos de mezcla; las operaciones no son intercambiables.

El contraste se comprueba al final

Una mezcla perceptual no garantiza texto legible. Comprueba el color compuesto sobre el fondo, en cada tema y estado.

Puedes usar el resultado donde CSS acepte un color: fondos, texto, bordes o sombras. No crea un gradiente ni mezcla los píxeles de dos elementos. Los colores de entrada pueden ser hex, rgb(), hsl(), oklch(), currentColor o variables; su notación no fija el espacio de interpolación.

Espacios de interpolación

Los mismos colores y pesos pueden producir resultados distintos.

sRGB interpola canales codificados; srgb-linear lo hace en luz lineal. Oklab busca una distribución perceptual más uniforme. Oklch separa luminosidad, croma y tono: el recorrido angular puede conservar más croma, pero también generar colores fuera del gamut de la pantalla.

Dos fuentes, cuatro espacios, el mismo 50/50

srgb · 50% / 50%

Esta expresión no está soportada: no se muestra su color calculado.

srgb-linear · 50% / 50%

Esta expresión no está soportada: no se muestra su color calculado.

oklab · 50% / 50%

Esta expresión no está soportada: no se muestra su color calculado.

oklch · 50% / 50%

Esta expresión no está soportada: no se muestra su color calculado.

Las fuentes son #ff7a8a y #6fd6ff en todas las muestras. Solo cambia el espacio indicado; ninguna muestra es una promesa de contraste.

Dos fuentes, cuatro espacios, el mismo 50/50

HTML

<div class="mix-guide-spaces">
  <div class="srgb">
    <p>srgb · 50% / 50%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="srgb-linear">
    <p>srgb-linear · 50% / 50%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="oklab">
    <p>oklab · 50% / 50%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="oklch">
    <p>oklch · 50% / 50%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.mix-guide-spaces {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  > div {
    flex: 1 1 12rem;
    min-inline-size: 0;
    display: grid;
    align-content: start;
    gap: 0.5rem;
  }

  p {
    margin: 0;
    color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
    font: 1rem/1.6 system-ui, sans-serif;
    overflow-wrap: anywhere;
  }

  .stage {
    min-block-size: 5rem;
    display: grid;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    background: repeating-conic-gradient(#fff 0 25%, #172554 0 50%) 0 / 1.5rem 1.5rem;
  }

  .paint {
    display: none;
  }

  @supports (background-color: color-mix(in srgb, #ff7a8a 50%, #6fd6ff 50%)) {
    .srgb .paint {
      display: block;
      background-color: color-mix(in srgb, #ff7a8a 50%, #6fd6ff 50%);
    }

    .srgb .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in srgb-linear, #ff7a8a 50%, #6fd6ff 50%)) {
    .srgb-linear .paint {
      display: block;
      background-color: color-mix(in srgb-linear, #ff7a8a 50%, #6fd6ff 50%);
    }

    .srgb-linear .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklab, #ff7a8a 50%, #6fd6ff 50%)) {
    .oklab .paint {
      display: block;
      background-color: color-mix(in oklab, #ff7a8a 50%, #6fd6ff 50%);
    }

    .oklab .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklch shorter hue, #ff7a8a 50%, #6fd6ff 50%)) {
    .oklch .paint {
      display: block;
      background-color: color-mix(in oklch shorter hue, #ff7a8a 50%, #6fd6ff 50%);
    }

    .oklch .unsupported {
      display: none;
    }
  }

  @media (forced-colors: active) {
    .stage {
      border: 1px solid CanvasText;
      background: Canvas;
    }
  }
}

Elige por intención: srgb para reproducir una interpolación existente, srgb-linear para luz, oklab para pasos perceptuales y oklch para controlar el tono. Lab/LCH y XYZ también están disponibles en el lab. Escribe in <espacio> explícitamente para facilitar lectura y compatibilidad; omitirlo es una variante más reciente.

Porcentajes y normalización

El peso de un color no es el alfa de ese color.

Con dos colores, omitir ambos porcentajes reparte 50/50; omitir uno lo completa hasta 100%. Si escribes ambos y suman más de 100%, se normalizan: 80% + 80% equivale a 50% + 50%. Si suman menos, se normalizan los pesos y la suma reduce además el alfa final.

Igual proporción, distinta opacidad

50% + 50%

Esta expresión no está soportada: no se muestra su color calculado.

80% + 80%

Esta expresión no está soportada: no se muestra su color calculado.

20% + 20%

Esta expresión no está soportada: no se muestra su color calculado.

25% + 75%

Esta expresión no está soportada: no se muestra su color calculado.

50/50 y 80/80 dan el mismo color opaco. 20/20 conserva la proporción 50/50, pero con alfa 0.4; 25/75 cambia la proporción. El patrón deja ver la transparencia.

Igual proporción, distinta opacidad

HTML

<div class="mix-guide-weights">
  <div class="equal">
    <p>50% + 50%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="above">
    <p>80% + 80%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="below">
    <p>20% + 20%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="weighted">
    <p>25% + 75%</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.mix-guide-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  > div {
    flex: 1 1 12rem;
    min-inline-size: 0;
    display: grid;
    align-content: start;
    gap: 0.5rem;
  }

  p {
    margin: 0;
    color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
    font: 1rem/1.6 system-ui, sans-serif;
    overflow-wrap: anywhere;
  }

  .stage {
    min-block-size: 5rem;
    display: grid;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    background: repeating-conic-gradient(#fff 0 25%, #172554 0 50%) 0 / 1.5rem 1.5rem;
  }

  .paint {
    display: none;
  }

  @supports (background-color: color-mix(in oklab, #ff7a8a 50%, #6fd6ff 50%)) {
    .equal .paint {
      display: block;
      background-color: color-mix(in oklab, #ff7a8a 50%, #6fd6ff 50%);
    }

    .equal .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklab, #ff7a8a 80%, #6fd6ff 80%)) {
    .above .paint {
      display: block;
      background-color: color-mix(in oklab, #ff7a8a 80%, #6fd6ff 80%);
    }

    .above .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklab, #ff7a8a 20%, #6fd6ff 20%)) {
    .below .paint {
      display: block;
      background-color: color-mix(in oklab, #ff7a8a 20%, #6fd6ff 20%);
    }

    .below .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklab, #ff7a8a 25%, #6fd6ff 75%)) {
    .weighted .paint {
      display: block;
      background-color: color-mix(in oklab, #ff7a8a 25%, #6fd6ff 75%);
    }

    .weighted .unsupported {
      display: none;
    }
  }

  @media (forced-colors: active) {
    .stage {
      border: 1px solid CanvasText;
      background: Canvas;
    }
  }
}

Ambos omitidos → 50% / 50%

color-mix(in oklab, #ff7a8a, #6fd6ff)

Uno omitido → 25% / 75%

color-mix(in oklab, #ff7a8a 25%, #6fd6ff)

Para dos colores opacos y suma S distinta de cero: peso normalizado = porcentaje / S; alfa final = min(S / 100, 1). Con entradas semitransparentes, ese factor multiplica el alfa interpolado. Usa valores entre 0% y 100% y una suma positiva: el caso todo a cero tiene diferencias entre documentación, propuesta y motores.

Transparencia y composición

Mezclar con blanco, mezclar con transparente y usar opacity resuelven problemas diferentes.

Blanco aclara el color y puede mantenerlo opaco. transparent reduce el alfa: con una fuente opaca al 50%, el resultado tiene alfa 0.5 y deja ver el fondo. opacity: 0.5 afecta al elemento completo, incluido su texto y descendientes; un background-color semitransparente no reduce el alfa del texto.

Blanco frente a transparente sobre dos fondos

Fuente 50% + blanco 50% · alfa 1

Esta expresión no está soportada: no se muestra su color calculado.

Fuente 50% + transparente 50% · alfa 0.5

Esta expresión no está soportada: no se muestra su color calculado.

Fuente con alfa 0.4 × 50% · alfa 0.2

Esta expresión no está soportada: no se muestra su color calculado.

La mezcla con blanco es opaca. La mezcla con transparente y la fuente con alfa 0.4 dejan ver las dos mitades del fondo; mezclar esa última al 50% con transparente produce alfa 0.2. Las etiquetas quedan fuera de las muestras.

Blanco frente a transparente sobre dos fondos

HTML

<div class="mix-guide-transparency">
  <div class="white">
    <p>Fuente 50% + blanco 50% · alfa 1</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="transparent">
    <p>Fuente 50% + transparente 50% · alfa 0.5</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="existing-alpha">
    <p>Fuente con alfa 0.4 × 50% · alfa 0.2</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.mix-guide-transparency {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  > div {
    flex: 1 1 12rem;
    min-inline-size: 0;
    display: grid;
    align-content: start;
    gap: 0.5rem;
  }

  p {
    margin: 0;
    color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
    font: 1rem/1.6 system-ui, sans-serif;
    overflow-wrap: anywhere;
  }

  .stage {
    min-block-size: 5rem;
    display: grid;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    background: linear-gradient(90deg, #fff 50%, #172554 0);
  }

  .paint {
    display: none;
  }

  @supports (background-color: color-mix(in oklab, #ff7a8a 50%, white 50%)) {
    .white .paint {
      display: block;
      background-color: color-mix(in oklab, #ff7a8a 50%, white 50%);
    }

    .white .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklab, #ff7a8a 50%, transparent 50%)) {
    .transparent .paint {
      display: block;
      background-color: color-mix(in oklab, #ff7a8a 50%, transparent 50%);
    }

    .transparent .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklab, rgb(255 122 138 / 0.4) 50%, transparent 50%)) {
    .existing-alpha .paint {
      display: block;
      background-color: color-mix(in oklab, rgb(255 122 138 / 0.4) 50%, transparent 50%);
    }

    .existing-alpha .unsupported {
      display: none;
    }
  }

  @media (forced-colors: active) {
    .stage {
      border: 1px solid CanvasText;
      background: Canvas;
    }
  }
}

CSS interpola con alfa premultiplicado: transparent no añade simplemente negro a los canales. Mezclar una fuente consigo misma o con transparente no recupera la opacidad que ya tenía perdida. Para fijar o modificar canales y alfa, evalúa colores relativos o alpha() con su soporte específico.

Recorrido del tono

En espacios polares, el tono es un ángulo, no un canal lineal.

hsl, hwb, lch y oklch admiten shorter hue, longer hue, increasing hue y decreasing hue. shorter es el valor por defecto: elige el arco más corto. longer toma el largo; increasing y decreasing siguen ángulos crecientes o decrecientes desde el primer color al segundo. Un espacio rectangular como oklab no admite ese modificador.

De 30° a 300° con luminosidad y croma iguales

shorter hue · 345°

Esta expresión no está soportada: no se muestra su color calculado.

longer hue · 165°

Esta expresión no está soportada: no se muestra su color calculado.

increasing hue · 165°

Esta expresión no está soportada: no se muestra su color calculado.

decreasing hue · 345°

Esta expresión no está soportada: no se muestra su color calculado.

shorter/decreasing pasan por 345°; longer/increasing pasan por 165°. Se mantiene L = 65%, C = 0.15 y peso 50/50. El texto indica la ruta además del color.

De 30° a 300° con luminosidad y croma iguales

HTML

<div class="mix-guide-hue">
  <div class="shorter">
    <p>shorter hue · 345°</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="longer">
    <p>longer hue · 165°</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="increasing">
    <p>increasing hue · 165°</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
  <div class="decreasing">
    <p>decreasing hue · 345°</p>
    <div class="stage" aria-hidden="true"><span class="paint"></span></div>
    <p class="unsupported">Esta expresión no está soportada: no se muestra su color calculado.</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.mix-guide-hue {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  > div {
    flex: 1 1 12rem;
    min-inline-size: 0;
    display: grid;
    align-content: start;
    gap: 0.5rem;
  }

  p {
    margin: 0;
    color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
    font: 1rem/1.6 system-ui, sans-serif;
    overflow-wrap: anywhere;
  }

  .stage {
    min-block-size: 5rem;
    display: grid;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    background: repeating-conic-gradient(#fff 0 25%, #172554 0 50%) 0 / 1.5rem 1.5rem;
  }

  .paint {
    display: none;
  }

  @supports (background-color: color-mix(in oklch shorter hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%)) {
    .shorter .paint {
      display: block;
      background-color: color-mix(in oklch shorter hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%);
    }

    .shorter .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklch longer hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%)) {
    .longer .paint {
      display: block;
      background-color: color-mix(in oklch longer hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%);
    }

    .longer .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklch increasing hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%)) {
    .increasing .paint {
      display: block;
      background-color: color-mix(in oklch increasing hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%);
    }

    .increasing .unsupported {
      display: none;
    }
  }

  @supports (background-color: color-mix(in oklch decreasing hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%)) {
    .decreasing .paint {
      display: block;
      background-color: color-mix(in oklch decreasing hue, oklch(65% 0.15 30) 50%, oklch(65% 0.15 300) 50%);
    }

    .decreasing .unsupported {
      display: none;
    }
  }

  @media (forced-colors: active) {
    .stage {
      border: 1px solid CanvasText;
      background: Canvas;
    }
  }
}

Estas coincidencias son propias de los ángulos de este ejemplo. Colores con tono ausente o sin croma tienen reglas especiales; no deduzcas una ruta útil mezclando blanco o gris. La elección del espacio sigue siendo independiente de cómo escribas las fuentes.

Variantes reutilizables de un color

Deriva un tinte y una sombra sin duplicar el color base.

Una custom property conserva la fuente y las mezclas derivan variantes. Este ejemplo usa Oklab, blanco para el fondo y negro para el borde. El texto tiene su propio color explícito: no se deduce automáticamente de la marca.

Una tarjeta con base y mejora progresiva

Una fuente, dos variantes y texto independiente.

El fondo es un tinte opaco al 15% y el borde una sombra al 70%. Sin soporte de la expresión, se conservan los colores base explícitos. La tarjeta no usa opacity y mantiene el texto opaco.

Una tarjeta con base y mejora progresiva

HTML

<div class="mix-guide-card">
  <p>Una fuente, dos variantes y texto independiente.</p>
</div>

CSS

.mix-guide-card {
  --base: #ff7a8a;
  padding: 1rem;
  border: 2px solid #7c3945;
  border-radius: 16px;
  corner-shape: squircle;
  color: #172554;
  background-color: #fff0f2;
  font: 1rem/1.6 system-ui, sans-serif;
  overflow-wrap: anywhere;

  p {
    margin: 0;
  }

  @supports (background-color: color-mix(in oklab, red, white)) {
    background-color: color-mix(in oklab, var(--base) 15%, white 85%);
    border-color: color-mix(in oklab, var(--base) 70%, black 30%);
  }

  @media (forced-colors: active) {
    color: CanvasText;
    background-color: Canvas;
    border-color: CanvasText;
  }
}

El fallback se declara fuera de las variables que contienen funciones modernas; @supports activa la mejora completa. Una variable puede aceptar texto aunque su uso como color falle al calcularse. Para variantes por tema, combina esta idea con light-dark(); para una capa translúcida, mezcla con transparent y vuelve a comprobar el fondo real.

Listas de colores en el lab actual

Añadir color usa la variante de tres o más colores, con soporte independiente. En espacios rectangulares, mezclar una lista no depende del orden; en espacios polares, el recorrido acumulado puede depender de él. No sustituyas una lista por mezclas anidadas arbitrarias: los pesos y el resultado pueden cambiar.

Errores frecuentes

Diagnostica la expresión y su contexto antes de ajustar colores al azar.

La mezcla parece lavada sobre un patrón

Resultado esperado: Una mezcla opaca entre las dos fuentes.
Causa: Los porcentajes explícitos suman menos de 100% y reducen el alfa.
Solución: Usa una suma de 100%, o acepta la transparencia y prueba sobre el fondo real.

El tono intermedio no es el esperado

Resultado esperado: Un tono entre las fuentes siguiendo la ruta elegida.
Causa: Cambió el espacio o se está usando el arco corto predeterminado.
Solución: Fija el espacio y, si es polar, el método hue. Compara las mismas fuentes y pesos.

El texto también se vuelve transparente

Resultado esperado: Un fondo translúcido con texto opaco.
Causa: Se aplicó opacity al contenedor completo.
Solución: Reduce el alfa del color de fondo con transparent y conserva el color del texto.

El color base desaparece al usar una variable

Resultado esperado: Un color de reserva cuando la sintaxis moderna no está disponible.
Causa: La variable existe, pero su valor no es válido como color al calcular la propiedad.
Solución: Declara la base y asigna la mezcla dentro de @supports con la expresión concreta.

Un tinte suave deja de ser legible

Resultado esperado: Texto y estados con contraste suficiente.
Causa: Se asumió que un espacio perceptual o un porcentaje fijo garantizaba contraste.
Solución: Mide el resultado compuesto sobre cada fondo y elige texto y estados por separado.

Soporte y compatibilidad

La función clásica y sus extensiones no comparten necesariamente disponibilidad.

La mezcla explícita de dos colores está Baseline Widely Available. Las listas de colores y la omisión del espacio de interpolación son extensiones con datos propios: la tarjeta de la función base no las certifica. Revisa también el soporte de cada función de color usada como argumento.

Las muestras prueban expresiones concretas con @supports y muestran un aviso si no se pueden pintar; no simulan el resultado con JavaScript. CSS.supports valida aceptación de sintaxis en el motor actual, sin certificar gamut, fidelidad visual, contraste ni comportamiento de otros navegadores.

Para aplicaciones que deban admitir motores anteriores, conserva un color explícito y mejora con @supports. Las etiquetas y explicaciones permanecen disponibles sin JavaScript y en colores forzados; en ese modo, las muestras pueden adoptar los colores del sistema.