Mezclador de Colores Combina dos colores con una proporción ajustable y observa el gradiente completo.

🎨

Mezclador de Colores

Combina dos colores con una proporción ajustable y observa el gradiente completo.

Elige Dos Colores

Selecciona los dos colores que deseas mezclar.

Ajusta la Proporción

Utiliza el control deslizante para controlar la proporción de la mezcla (0-100%).

Copia el Resultado

Copia el color HEX mezclado.

Loading tool...

What Is Mezclador de Colores?

Un mezclador de colores combina dos colores en cualquier proporción, mostrándote el color resultante exacto junto con una gradiente de 11 pasos del rango de mezcla completo. La interpolación lineal RGB produce el color mezclado, que imita el efecto de mezclar colores de pintura o crear transiciones de color CSS. El control deslizante de proporción te permite hacer una transición suave desde el 100% del primer color hasta el 100% del segundo. La herramienta muestra tanto el resultado mezclado en una vista previa grande como la tira de gradiente completa para contexto. La mezcla de colores es fundamental para crear colores intermedios para gradientes, encontrar colores de punto medio para sistemas de diseño, generar colores de transición para animaciones y comprender cómo interactúan dos colores de marca cuando se superponen.

Why Use Mezclador de Colores?

Control deslizante de proporción suave desde 0% hasta 100% para una mezcla precisa
Vista previa grande del resultado mezclado
Gradiente de 11 pasos que muestra el rango completo de la mezcla
Salidas tanto en HEX como en RGB con botones de copia
Ver instantáneamente cómo se combinan dos colores

Common Use Cases

Encontrar Puntos Medios

Encuentra el color exacto del punto medio entre dos colores de marca para transiciones suaves.

Diseño de Gradientes

Previsualiza cómo se mezclarán dos colores en un gradiente antes de implementarlo en CSS.

Transiciones de Color

Genera colores intermedios para pasos de animación entre dos estados de color.

Expansión de Paleta

Crea nuevos colores mezclando colores existentes en la paleta a varias proporciones.

Technical Guide

El mezclador realiza una interpolación lineal (lerp) en el espacio de color RGB: resultado = color1 × (1 - t) + color2 × t, donde t es la proporción de mezcla desde 0 hasta 1. Cada canal (R, G, B) se interpola de forma independiente. Este es el método de mezcla más simple y coincide con cómo las transiciones CSS interpolan entre colores. Existen métodos de mezcla más sofisticados (espacio Lab perceptual, oklab), pero la interpolación lineal RGB es la más utilizada y coherente con la representación del navegador. La gradiente de 11 pasos visualiza el rango de interpolación completo en intervalos del 10%. Tenga en cuenta que la interpolación lineal RGB puede producir puntos medios ligeramente desaturados: por ejemplo, mezclar rojo puro y verde puro produce un marrón amarillento turbio al 50%, no un amarillo brillante. Esto se debe a que la interpolación RGB no sigue la rueda de colores.

Tips & Best Practices

1
Una mezcla al 50% da el punto medio visual exacto entre dos colores
2
Intenta mezclar colores complementarios - el punto medio suele ser un gris neutral interesante
3
Utiliza la tira de gradiente para encontrar la proporción en la que la mezcla se ve mejor, no solo al 50%
4
Mezclar con blanco (tonalidad) o negro (sombreado) a varias proporciones crea escalas suaves
5
La mezcla RGB puede producir puntos medios apagados - este es un comportamiento esperado para la mezcla aditiva

Related Tools

Selector de colores

Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.

🎨 Color Tools

Generador de Paleta Monocroma

Genera una paleta de colores monocroma a partir de cualquier color base.

🎨 Color Tools

Generador de Degradados Lineales

Crea degredados lineales CSS con colores personalizados, ángulo y paradas de color.

🎨 Color Tools

Generador de tonos de color

Genera tonos más oscuros de cualquier color con un recuento de pasos ajustable.

🎨 Color Tools

Generador de tonos claros de colores

Genera tonos más claros de cualquier color con un recuento de pasos ajustable.

🎨 Color Tools

Frequently Asked Questions

Q ¿Cómo se calcula la mezcla de colores?

Los colores se mezclan utilizando interpolación lineal en el espacio RGB. Cada canal (R, G, B) se mezcla de forma independiente: resultado = canal1 × (1-proporción) + canal2 × proporción.

Q ¿Por qué mezclar rojo y verde produce marrón en lugar de amarillo?

En la interpolación lineal RGB, el camino pasa por valores intermedios apagados. El verdadero amarillo se encuentra en una posición diferente del espacio de color. Para una mezcla consciente de la rueda de colores, utilice la interpolación HSL.

Q ¿Es esta una mezcla aditiva o sustractiva?

Esta es una mezcla aditiva (basada en luz) en el espacio RGB, que coincide con cómo las pantallas muestran los colores. La mezcla sustractiva similar a la pintura produciría resultados diferentes (por ejemplo, azul + amarillo = verde en pintura, gris en RGB).

About This Tool

Mezclador de Colores is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.