Mezclador de colores

El resultado de mezclar dos colores depende del método de mezcla

Si mezclas a partes iguales azul #0000FF y amarillo #FFFF00, la diferencia se ve enseguida. Al promediar los valores RGB en pantalla sale el gris #808080, y al proyectar las dos luces juntas a media intensidad sale un gris claro, #BCBCBC. Mezclados como pintura, resultan en un turquesa verdoso, #217D90, y si subes el amarillo al 75 %, el color se acerca al verde #81B265. Con OKLab, el método por defecto de color-mix() en CSS, sale un azul cielo, #6CABC7.

La calculadora de arriba muestra estos cinco métodos uno al lado del otro. Introduce dos colores y una proporción, y cada método te da una franja de A a B y el color en la proporción actual. Con el método que elijas puedes obtener los valores HEX, RGB, HSL y OKLCH, el código CSS y una paleta por pasos. El mapa de caminos de mezcla de más abajo enseña por qué los colores siguen rutas distintas y por qué un resultado queda apagado o se mantiene vivo.

Por qué calcular un color mezclado de antemano y cuándo sirve

El método de mezcla adecuado depende de dónde vayas a usar el color. Si esperas un resultado de pintura para un color pensado para pantalla, o juzgas una mezcla de pintura solo por la media en pantalla, obtendrás un color que no esperabas.

• Diseño web y de apps: comprueba el HEX resultante antes de crear con color-mix() de CSS un color de hover algo más oscuro o un fondo claro a partir de un color de marca y blanco.
• Gráficos y degradados: divide el tramo entre dos colores en 5, 7 o 9 pasos para crear una rampa de color ordenada. Aquí importa elegir un método cuyo punto medio no se apague.
• Pintura, manualidades y pintura de pared: antes de mezclar pintura de verdad, calcula a grandes rasgos hacia qué color se inclinará la mezcla y cuánto blanco o negro conviene añadir.
• Clases y explicaciones: enseña con los mismos dos colores por qué la mezcla de luz (aditiva) y la de pintura (sustractiva) dan resultados distintos.

Cómo usar la calculadora

1. En los campos Color A y Color B escribe un código HEX como #3498db, 3498db o #f80, o una notación CSS como rgb(52 152 219), hsl(204 70% 53%) o tomato. Si haces clic en la muestra a la izquierda del campo, puedes elegir el color con un selector; el botón del centro intercambia A y B.
2. La parte de B es la porción de B en el color mezclado. Si escribes 30, obtienes A 70 %, B 30 %. También puedes arrastrar el marcador vertical sobre la franja de cinco filas, o hacer clic en la franja y moverlo de 1 % en 1 % con las flechas izquierda y derecha.
3. Haz clic en el nombre de un método a la izquierda para usarlo en la tarjeta de resultado y en la paleta por pasos. El botón HEX de la derecha copia solo el resultado de ese método.
4. En la tarjeta de resultado copia los valores HEX, RGB, HSL y OKLCH y el código CSS de color-mix(). CSS no tiene una función equivalente al método de pintura, así que usa su HEX.
5. En la paleta por pasos elige el número de pasos y llévate el resultado como lista HEX, variables CSS o imagen PNG. Si haces clic en una celda, se copia el HEX de ese color.

Cinco formas de mezclar colores

Los cinco métodos reciben los mismos dos colores y la misma proporción, pero difieren en qué valores promedian. La última columna muestra el resultado de mezclar azul #0000FF y amarillo #FFFF00 al 50 : 50.

La media sRGB es lo que hacían los antiguos mezcladores HEX, así que sus resultados resultan familiares, pero dos colores casi complementarios se desvían con fuerza hacia el gris. El método de luz sale siempre igual o más claro que la media sRGB para los mismos dos colores. Los números HEX son intensidad de luz comprimida con una curva gamma, así que si promedias la intensidad misma y vuelves a HEX, el punto medio queda más claro.

Por qué la pintura se mezcla distinto que la pantalla

Una pantalla crea el color sumando luz roja, verde y azul (mezcla aditiva). La pintura funciona al revés: absorbe algunas longitudes de onda de la luz que le llega y devuelve el resto (mezcla sustractiva). La pintura azul devuelve sobre todo longitudes de onda cortas y la amarilla, las medias y largas, así que al mezclarlas solo quedan las longitudes de onda cercanas al verde que ambas devuelven. Por eso azul + amarillo, que en la media sRGB da gris, en pintura da un color verdoso.

El método de pintura de esta calculadora sigue el procedimiento publicado por Scott Allen Burns. Primero convierte cada color en 36 valores de reflectancia, que cubren la luz visible de 380 a 730 nm en pasos de 10 nm. Como hay infinitas curvas que producen el mismo RGB, elige la más suave (la de menor suma de cuadrados de las diferencias logarítmicas entre valores vecinos y con reflectancia entre 0 y 1). Después mezcla las dos curvas longitud de onda por longitud de onda con una media geométrica ponderada, es decir, reflectancia A^{1 − t} × reflectancia B^t (t es la parte de B), y vuelve a calcular el sRGB con las funciones de igualación de color CIE 1931 y la luz diurna D65.

Una media geométrica es un producto, así que el color más oscuro pesa más. El azul #0000FF refleja menos de una décima parte de la luz (luminancia relativa) que el amarillo, de modo que una mezcla a partes iguales sigue del lado del azul, un turquesa. Cuanto más amarillo añades, más se desplaza hacia el verde.

Tabla de mezclas de las combinaciones más buscadas

Todos los resultados de la tabla siguiente son mezclas al 50 : 50. Incluso en la misma fila los colores cambian mucho de un método a otro, así que fíjate en la columna que corresponda al uso que le vas a dar. Si haces clic en una pareja de «Combinaciones habituales» en la calculadora de arriba, se carga la misma combinación.

En la columna Pintura, rojo + verde da marrón y rojo + azul da un morado oscuro. La dirección coincide con lo que se suele ver al mezclar dos pinturas reales. La columna Luz es igual o más clara que la media sRGB en todas las combinaciones.

Por qué mezclar en pantalla apaga los colores

Un color apagado es un color de baja saturación. El mapa de caminos de mezcla mira el espacio de color desde arriba, como el plano a-b de OKLab: cuanto más cerca del centro, más gris es el color, y cuanto más cerca de la banda exterior, más vivo. La media sRGB une A y B con una recta dentro de la caja RGB, así que con dos colores casi complementarios el camino pasa por el gris del centro. OKLCH rodea el borde de la rueda de color y conserva la saturación.

La cifra entre paréntesis es la proporción respecto a la media de la saturación de los dos colores. Cuando cada paso debe distinguirse bien, como en un gráfico, conviene OKLCH. El método de luz conserva la saturación en pares no complementarios, como rojo + azul, pero vuelve gris a los pares complementarios, como azul + amarillo, igual que la media sRGB. Eso sí, entre dos colores vivos OKLCH se va fácilmente a colores que una pantalla no puede mostrar, por lo que puede salir un valor recortado, como en el azul + amarillo de OKLCH de la tabla anterior.

Cuando mezclas blanco o negro (tintes y sombras)

Un color aclarado con blanco se llama tinte, y uno oscurecido con negro, sombra. La media sRGB se aclara de forma pareja a medida que crece la parte de blanco, mientras que el método de pintura necesita bastante blanco para que el rojo se vuelva rosa.

El negro, en cambio, es muy fuerte en el método de pintura. Si añades solo un 10 % de negro al blanco obtienes #A9A9A9, con un 25 % obtienes #595959, y a partes iguales sale un casi negro #191919. Las mismas proporciones con la media sRGB dan #E6E6E6, #BFBFBF y #808080. Con pintura real también se suele añadir el negro poco a poco.

Usar color-mix() de CSS

En CSS se escribe el espacio en el que mezclar y los dos colores, como en color-mix(in oklab, #3498DB, #E74C3C). La línea CSS de la tarjeta de resultado genera este código con el espacio que corresponde al método elegido (srgb-linear, srgb, oklab u oklch). Los porcentajes se normalizan como se muestra a continuación.

El borrador de CSS Color 5 establece que, si se omite el espacio, se mezcla en oklab, pero pensando en los navegadores antiguos es más seguro escribir in oklab completo. Los espacios polares (oklch, hsl) toman el camino corto por el círculo de tonos, y si escribes in oklch longer hue toman el largo.

Errores frecuentes

• Creer que la media HEX es el resultado de la pintura: que azul + amarillo salga gris no es un error de cálculo, sino la naturaleza de la media en pantalla. Si quieres el resultado de la pintura, mira la fila Pintura.
• Leer la proporción al revés: tanto en esta calculadora como en CSS, una parte de B del 30 % significa A al 70 %. En color-mix(), un porcentaje pertenece al color que lo precede.
• Pensar que mezclar luz es sumar: encender a la vez luz roja y luz verde da amarillo #FFFF00, pero el método de luz de aquí es la media de dos luces encendidas según la proporción, y por eso da #BCBC00.
• Fiarse sin más de un resultado OKLCH: entre dos colores vivos el camino se sale fácilmente de sRGB. Si la tarjeta de resultado avisa de que se recortó, el color que ves en pantalla es ese HEX.
• Añadir demasiado negro: en el método de pintura, mezclar un 30 % de negro con blanco ya da un gris oscuro, #474747, y solo un 10 % de negro en el rojo lo oscurece hasta #AA0D0B (la media sRGB da #E60000). Para oscurecer, empieza por debajo del 10 % y sube poco a poco.
• Esperar un pastel con unas gotas de blanco: en el método de pintura, para convertir el rojo en rosa hace falta alrededor de un 75 % de blanco.

Limitaciones y advertencias

• El método de pintura trata un color de pantalla como una pintura hipotética con la «reflectancia más suave» y la mezcla como aproximación. Las pinturas reales difieren de un pigmento a otro en la curva de reflectancia y el poder tintóreo (la fuerza con que arrastran la mezcla hacia su propio color), de modo que el mismo HEX da resultados distintos según la marca y el pigmento.
• Un canal de 0 se sustituye por 0,0001 para el cálculo, así que incluso el negro puro #000000 se trata como una pintura muy oscura con una reflectancia de 0,0001. Las proporciones extremas, 0 % y 100 %, devuelven el color introducido sin cambios.
• Si un resultado queda fuera de la gama de pantalla (sRGB), los canales se recortan a 0-255 para mostrarlos. Esto coincide con la forma en que Chrome 151 dibuja los resultados de color-mix() y puede diferir del método de reducción de saturación que recomienda CSS Color 4.
• Se ignora la transparencia y los dos colores se mezclan como opacos. Si introduces un color semitransparente, aparece un aviso de que se ignora su transparencia.
• El color que ves en pantalla puede variar según la gama y el brillo del monitor. Si necesitas un color para imprimir, compruébalo con un conversor de RGB a CMYK según las condiciones de impresión.

Base: el método de pintura usa el procedimiento de curvas de reflectancia (380-730 nm, 10 nm) más media geométrica ponderada de Scott Allen Burns, con las funciones de igualación de color CIE 1931 de 2° y la luz diurna D65; los otros cuatro métodos siguen las definiciones de color-mix() de CSS Color 4 y 5. Los resultados de CSS se comprobaron en Chrome 151 el 21 de octubre de 2026.

Fuentes

• 01Scott Allen Burns — Subtractive Color Mixture ComputationEl procedimiento que convierte RGB en curvas de reflectancia, las mezcla con una media geométrica ponderada y vuelve a RGB, con el ejemplo de azul + amarillo
• 02Scott Allen Burns — Generating Reflectance Curves from sRGB Triplets36 puntos de 380 a 730 nm cada 10 nm, la curva más suave (LLSS, ILLSS), reflectancia de 0 a 1
• 03W3C — CSS Color Module Level 5Sintaxis de color-mix(), oklab cuando se omite el método, normalización de porcentajes y alfa cuando la suma es inferior al 100 %
• 04W3C — CSS Color Module Level 4Oklab como espacio de interpolación por defecto, shorter como interpolación de tono por defecto, la función de transferencia sRGB y las matrices de conversión de OKLab
• 05CIE — CIE 1931 colour-matching functions, 2 degree observerDatos de las funciones de igualación de color para convertir una curva de reflectancia a XYZ
• 06CIE — Components of relative spectral distribution of daylightLas componentes S0, S1 y S2 que forman el espectro de la luz diurna D65 (6504 K)
• 07Björn Ottosson — A perceptual color space for image processingDefinición e intención de diseño del espacio de color OKLab
• 08MDN — color-mix()Ejemplos de sintaxis y compatibilidad de navegadores (Chrome 111, Firefox 113, Safari 16.2)

Preguntas frecuentes

Herramientas que se usan junto con esta