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

[Canonical HTML page](https://gradiently.design/es/guide/css-color-mix)

color-mix() deja que el navegador haga las cuentas de color que antes hacías en un preprocesador o a ojo. Elige el espacio de color adecuado y un solo color de marca puede producir toda una paleta de tintes, sombras y versiones translúcidas.

## The short version

- La función color-mix de CSS mezcla dos colores en un espacio de color con nombre, por ejemplo color-mix(in oklab, #7c3aed 40%, white).
- Si das solo un porcentaje, el otro color recibe el resto; si no das ninguno, la mezcla es a partes iguales.
- Mezclar en oklab mantiene la luminosidad uniforme y evita los centros grises que produce la mezcla en sRGB entre tonos lejanos.
- Mezclar un color con transparent es la forma más limpia de crear una versión translúcida de un color guardado en una propiedad personalizada.
- color-mix() funciona en todos los navegadores principales actuales, así que es seguro en producción con un color normal como alternativa para los muy antiguos.

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()

```css
/* 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); }
```

El espacio de color va primero y se escribe completo. Los espacios basados en el tono, como oklch y hsl, admiten además una dirección de tono: shorter, longer, increasing o decreasing.

| Escribes | El navegador usa | Notas |
| --- | --- | --- |
| Ningún porcentaje | 50% y 50% | Una mezcla a partes iguales |
| Un porcentaje, por ejemplo 30% | 30% y 70% | El otro color recibe el resto |
| Dos que suman 100% | Tal cual | La forma más clara de leer después |
| Dos que suman más de 100% | Se reducen al 100% | 60% y 60% se comporta como 50% y 50% |
| Dos que suman menos de 100% | Se amplían y el resultado se vuelve translúcido | 20% y 30% da un resultado a media opacidad |

Cómo se resuelven los porcentajes. La última fila sorprende: un total por debajo de 100 hace el resultado parcialmente transparente.

## 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](https://gradiently.design/es/guide/gradient-interpolation) explica la misma elección para los degradados, que es donde mejor se ve el efecto.

- sRGB: gris plano en el centro: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: centro más claro y limpio: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: pasa por cian y verde: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

De azul a amarillo en tres espacios. El punto medio de cada franja es exactamente lo que devuelve `color-mix()` al 50 por ciento en ese espacio: `#808080` en sRGB, un gris azulado claro en oklab.

- **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](https://gradiently.design/es/guide/oklch-explained). 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.

```css
: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);
}
```

Una escala de siete pasos a partir de un color. Cambia `--brand` por cualquier hex y la escala lo sigue.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

En qué se resuelve la escala de arriba para `#7c3aed`, calculada en oklab. Mezclados en sRGB, los tintes salen algo más grises y las sombras algo más planas.

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](https://gradiently.design/es/guide/tints-tones-shades) 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.

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

Una etiqueta teñida y un estado hover a partir de la misma variable. Ningún segundo color que mantener.

## 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](https://caniuse.com/mdn-css_types_color_color-mix). 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.

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

Primero la alternativa, después la mejora. La cascada hace el resto.

Un tema completo construido con estos patrones, con modo claro y oscuro, está en [variables CSS para temas](https://gradiently.design/es/guide/css-custom-properties-theming).

## 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](https://gradiently.design/es/guide/muddy-gradients).

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.

## FAQ

### ¿Qué hace color-mix() en CSS?

Mezcla dos colores en un espacio de color que tú nombras y devuelve el resultado, por ejemplo `color-mix(in oklab, red 30%, white)`.

### ¿Qué espacio de color debo usar con color-mix()?

Usa oklab para tintes, sombras y la mayoría de las mezclas, oklch cuando quieras que el tono viaje y srgb para mezclar con transparent.

### ¿Cómo hago un color transparente con color-mix()?

Mézclalo con `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` da el color de marca al 20 por ciento de opacidad.

### ¿color-mix() funciona en todos los navegadores?

Funciona en las versiones actuales de Chrome, Edge, Firefox y Safari. Declara primero un color normal como alternativa para navegadores antiguos.

### ¿Qué pasa si los porcentajes no suman 100?

Los totales por encima de 100 se reducen. Los totales por debajo de 100 se amplían y el resultado se vuelve parcialmente transparente.