Mezclador de dos colores

Cómo funciona la mezcla

Mezclar colores en pantalla no es lo mismo que mezclar pinturas. En pantalla los colores se forman con luz roja, verde y azul (RGB). Cuando "mezclás" dos colores en RGB, lo que hacés es promediar los valores de los tres canales con un peso que define el porcentaje. Si el peso es 50%, cada canal queda al medio entre los dos colores.

La fórmula

nuevoR = R1 * (1 - p) + R2 * p
nuevoG = G1 * (1 - p) + G2 * p
nuevoB = B1 * (1 - p) + B2 * p

Donde p va de 0 a 1. Es interpolación lineal entre los dos colores.

Mezcla en RGB vs perceptual

Mezclar dos colores complementarios (azul y naranja, rojo y verde) en RGB casi siempre pasa por un gris a mitad de camino. Eso a veces es lo que querés (transición suave) y a veces no (pierde el carácter de ambos colores). Para mezclas más "vibrantes", existen espacios de color como HSL, LCH y OKLab. CSS nuevo soporta color-mix(in oklab, c1, c2 50%), que hace mezclas perceptualmente uniformes.

Casos de uso

• Construir escalas de color: tu primario mezclado con blanco da los tonos claros (50, 100, 200), con negro los oscuros (700, 800, 900).
• Gradientes: ayuda a entender qué colores se ven bien al lado uno del otro.
• States: hover, active suelen ser una mezcla del color base con negro o blanco.
• Theming: derivar colores secundarios desde uno primario.

Construyendo escalas con mezcla

Una técnica simple para generar una escala de 10 tonos desde un primario: tomá el color base como tono 500. Mezclalo con blanco al 90%, 80%, 70%... 10% para los tonos 50, 100, 200... 400. Mezclalo con negro al 10%, 20%, 30%... 50% para 600, 700, 800, 900. No es perfecto, pero da una escala usable que sirve como punto de partida para ajustes manuales.

Limitaciones

La mezcla RGB no respeta la luminancia perceptual. Mezclar amarillo y azul al 50% en RGB da un gris medio, no un verde como pasaría con pinturas. Para mezclas más naturales, OKLCH es la mejor opción moderna: respeta cómo el ojo humano percibe la luminosidad.

Tip de diseño

Cuando mezclás dos colores de marca, fijate si la mezcla intermedia es usable como un tercer color de la paleta. A veces sale algo lindo de manera accidental. Otras veces el medio se ve "sucio" y conviene saltearlo en la escala.