Mezclador de Colores

¿Qué significa mezclar colores?

Mezclar dos colores los combina a lo largo de una línea recta en algún espacio de color, produciendo cada matiz intermedio entre ellos. La elección del espacio importa: mezclar en sRGB crudo (los valores del código hex) parece intuitivo pero produce puntos medios opacos y grises — porque sRGB está codificado en gama, no es lineal. Mezclar en RGB de luz lineal — que es lo que esta herramienta hace por defecto — da puntos medios más brillantes y precisos, que coinciden con la forma en que la luz se suma en el mundo físico. La diferencia es más visible al mezclar un color saturado con blanco o con otro color saturado: la mezcla lineal mantiene el punto medio vívido, mientras que la mezcla ingenua en sRGB lo aplana.

Cómo usar este mezclador

Elige dos colores con los selectores (o pega códigos hex), luego arrastra el control de proporción para elegir cuánto de B mezclar en A. El bloque de resultado se actualiza al instante, mostrando valores hex, RGB y HSL. Marca Mostrar 11 paradas para renderizar una franja-gradiente de 11 pasos entre los dos — útil para escoger colores interpolados para ejes de gráfico o frames de animación. Haz clic en cualquier parada para copiar su hex.

Cuándo usar qué

Usa este mezclador para combinar colores de marca en estados hover/active, derivar series interpoladas para gráficos en posiciones personalizadas, construir gradientes de data binding (heatmap de frío a cálido), o comprobar rápido si dos colores van a producir un punto medio sucio antes de comprometerte con un gradiente. Para estados de UI, paradas en 25%, 50% y 75% dan una rampa coherente sin huecos visuales. Para visualización de datos, 11 paradas calzan con una escala 0-100 típica (cada 10%) — sin matemática extra.

Cómo se calcula la mezcla

Cada color de entrada se decodifica de gama de sRGB a sRGB lineal: los valores por debajo de 0.04045 se dividen por 12.92, el resto pasa por ((c + 0.055) / 1.055)2.4. Los dos valores lineales se interpolan linealmente por canal: salida = A·(1−t) + B·t donde t es la posición del control. Por último el resultado se codifica en gama de vuelta a sRGB y se mapea al rango de bytes 0-255. Es el mismo pipeline que los editores de imagen modernos usan para renderizado preciso de gradientes.

Mezcla en distintos espacios de color

sRGB ingenuo: rápido, intuitivo, pero produce puntos medios oscuros/sucios — evítalo para mezclas vívidas. sRGB lineal (lo que usamos): suma de luz físicamente precisa; los puntos medios siguen brillantes. HSL: bueno para rampas de matiz pero interpola mal en regiones de baja saturación. OKLCH: perceptualmente uniforme; el estándar oro para design tokens, pero más complejo de calcular. Para mezcla cotidiana de colores, sRGB lineal logra el equilibrio correcto entre precisión y simplicidad.

Preguntas frecuentes