color-mix() en CSS: mezclar colores en el navegador

La función color-mix de CSS, color-mix(), mezcla dos colores en el espacio de color que elijas y devuelve un color nuevo. Escribe color-mix(in oklab, #7c3aed 40%, white) y obtendrás un violeta pálido que es un 40 por ciento violeta y un 60 por ciento blanco, mezclado de forma perceptiva. Funciona en todos los navegadores principales actuales. Junto con las propiedades personalizadas, convierte un color de marca en tintes, sombras, estados hover y capas translúcidas sin un solo hex escrito a mano.

Sintaxis de color-mix()

/* color-mix(in <colour space>, <colour> [<percentage>], <colour> [<percentage>]) */

.a { color: color-mix(in oklab, #7c3aed, white); }          /* 50% each */
.b { color: color-mix(in oklab, #7c3aed 40%, white); }      /* 40% violet, 60% white */
.c { color: color-mix(in oklab, #7c3aed, black 30%); }      /* 70% violet, 30% black */
.d { color: color-mix(in srgb, #7c3aed 50%, transparent); } /* violet at half opacity */
.e { color: color-mix(in oklch shorter hue, #2563eb, #f59e0b); }

En qué espacio de color mezclar

El espacio de color decide el camino entre los dos colores. En sRGB el navegador promedia los números de rojo, verde y azul, lo que es fácil de razonar pero no es como ven los ojos. Dos tonos lejanos pasan por un gris apagado por el camino. En oklab la mezcla sigue la luminosidad y el color percibidos, así que el centro queda limpio y los pasos se ven uniformes. Interpolación de degradados explica la misma elección para los degradados, que es donde mejor se ve el efecto.

• oklab para tintes, sombras y casi cualquier mezcla del día a día. Luminosidad uniforme, sin bajón gris.
• oklch cuando quieres que el tono viaje, por ejemplo al mezclar dos colores de marca en un tercero que queda entre ellos en el círculo.
• srgb para mezclar con transparent o igualar herramientas de diseño antiguas que mezclan en sRGB.
• srgb-linear para mezclas de luz físicamente correctas, que se ven más claras en el centro.

Para entender por qué los espacios perceptivos se comportan mejor, consulta OKLCH explicado. Las versiones recientes de la especificación permiten omitir el espacio de color y usar oklab por defecto, pero el soporte de esa forma abreviada es más reciente, así que escribe in oklab de forma explícita.

Tintes y sombras a partir de un color de marca

El patrón más útil es una escala construida a partir de una sola variable. Mezcla hacia el blanco para los tintes y hacia el negro para las sombras. Cambia la variable y cada paso se actualiza, lo que la hace ideal para productos con varias marcas o temas que elige el usuario.

:root {
  --brand: #7c3aed;

  --brand-100: color-mix(in oklab, var(--brand) 20%, white);
  --brand-200: color-mix(in oklab, var(--brand) 40%, white);
  --brand-300: color-mix(in oklab, var(--brand) 60%, white);
  --brand-400: color-mix(in oklab, var(--brand) 80%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 80%, black);
  --brand-700: color-mix(in oklab, var(--brand) 60%, black);
}

Mezclar con blanco y negro puros es un punto de partida. Para tintes más cálidos, mezcla hacia un blanco roto como #fdf6ec; para sombras más ricas, mezcla hacia un azul marino profundo en lugar del negro. Así la escala se siente propia de tu marca y no una rampa genérica. Tintes, tonos y sombras cubre la teoría del color.

Transparencia con color-mix()

Antes de color-mix(), crear una versión translúcida de un color guardado en una variable obligaba a guardar los canales por separado. Ahora lo mezclas con transparent. La cantidad que conservas es la opacidad.

.badge {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.button:hover {
  background: color-mix(in oklab, var(--brand), black 12%);
}

Errores habituales con color-mix()

• Omitir el espacio de color en código que tiene que funcionar en navegadores antiguos. Se descarta la declaración entera, no solo el espacio.
• Mezclar con negro para todas las sombras. Las sombras de colores saturados se apagan; mezcla mejor hacia una versión profunda del tono.
• Esperar que los porcentajes por debajo de 100 sigan siendo opacos. color-mix(in oklab, red 20%, blue 30%) es semitransparente.
• Usar hsl para los tintes. La luminosidad en hsl no es perceptiva, así que un amarillo y un azul con la misma mezcla no parecen en absoluto el mismo paso.

Soporte en navegadores y alternativas

color-mix() está disponible en Chrome, Edge, Firefox y Safari desde 2023, y el soporte actual aparece en caniuse. Si necesitas cubrir navegadores muy antiguos, declara primero un color normal y deja que el mezclado lo sobrescriba. Los navegadores que no entienden la segunda línea la ignoran.

.card {
  background: #ede9fe;
  background: color-mix(in oklab, var(--brand) 15%, white);
}

Un tema completo construido con estos patrones, con modo claro y oscuro, está en variables CSS para temas.

Mezclar colores para degradados

color-mix() es muy práctico dentro de los degradados, donde puede calcular una parada intermedia a partir de dos colores de marca para que la mezcla nunca pase por el barro. linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b)) te da una tercera parada en el camino de tono entre ambos. El problema de fondo se explica en degradados turbios.

Si tu color de marca vive en un Mark de Gradiently, la receta del Mark ya contiene una familia de colores relacionados elegidos para funcionar juntos, y el Mercado te permite buscar con palabras de color como «violeta profundo» para encontrar uno construido alrededor del tono del que partes.