Saltar al contenido

Mezclador de colores: mezcla dos colores y descubre el resultado

Elige dos colores, ajusta la proporción y obtén al instante el tono resultante en HEX, RGB y OKLCH, con su escala intermedia y el código CSS listo para copiar.

Resultado#598FE550%50%

Colores

Proporción del color B

50%
A 50% · B 50%

Espacio de mezcla

Pasos
10
Balance
background: color-mix(in srgb, #2C71DE 50%, #85ADEC);
/* = #598FE5 */

Conversión de color

Mezclas populares

¿Qué color sale al mezclar rojo y azul? Carga una pareja clásica y ajústala a tu gusto.

Para qué sirve mezclar dos colores

El mezclador de colores combina dos colores en la proporción que elijas y calcula el tono exacto resultante. Es distinto de explorar armonías desde un único color base, eso lo hace el círculo cromático: aquí partes de dos colores ya definidos y buscas el punto intermedio entre ellos.

Es especialmente útil para encontrar un tono de transición entre dos colores de marca, construir una escala de tonos intermedios para estados de interfaz (hover, fondos, bordes) o generar el CSS de la mezcla sin calcular porcentajes a mano: la herramienta te da tanto el color-mix() nativo como el degradado linear-gradient().

Cómo mezclar dos colores en tres pasos

  1. Elige los dos colores

    Pulsa Color A o Color B y ajústalo con el tono, el brillo, el cuentagotas o escribiendo su código. El botón Intercambiar invierte el orden.

  2. Ajusta la proporción

    Arrastra el deslizador o usa los atajos de 25, 50 y 75 %. Con 0 % obtienes el Color A puro y con 100 %, el Color B.

  3. Copia el resultado

    Copia el color en HEX con un clic, o el código color-mix(), el degradado o las clases de Tailwind. Debajo tienes el mismo color en RGB, HSL, CMYK, LAB y más formatos.

¿Por qué azul y amarillo no dan verde en pantalla?

En el colegio aprendimos que azul y amarillo dan verde. Es cierto con pintura: los pigmentos absorben luz, y al combinarlos solo se refleja lo que ninguno de los dos absorbe, en este caso el verde. Es una mezcla sustractiva.

Una pantalla no mezcla pigmentos sino luz. Al promediar los canales RGB del azul y del amarillo se compensan entre sí y el resultado es un gris. Si buscas el comportamiento de la pintura, añade tú el verde como color intermedio, o compara el resultado en modo perceptual (OKLab), que conserva mejor la luminosidad.

RGB o perceptual: qué espacio de mezcla elegir

El mismo par de colores puede dar mezclas distintas según el espacio en el que se calcule. La herramienta te deja elegir entre los dos más usados, los mismos que acepta la función color-mix() de CSS.

50 % = #800080

RGB (sRGB)

Promedia los canales rojo, verde y azul. Es el cálculo clásico y el que usan la mayoría de editores. Entre colores saturados y opuestos, el punto medio suele salir más oscuro y apagado.

50 % = #8C53A2

Perceptual (OKLab)

Interpola en un espacio diseñado según cómo percibimos el color. Los pasos avanzan de forma más uniforme y los tonos medios quedan más luminosos. Es la opción recomendada para escalas y degradados de interfaz.

La diferencia entre mezclar y generar armonías

Mezclar dos colores

Interpola directamente entre dos colores concretos que tú eliges. El resultado depende de los colores de partida y de la proporción: ideal cuando ya tienes dos colores fijos y necesitas el punto intermedio.

Generar armonías

Se calcula matemáticamente a partir de la posición de un único color en la rueda cromática (análoga, complementaria, tríadica…). Sirve para construir una paleta completa, no un tono intermedio entre dos colores dados.

Preguntas frecuentes

Se interpola cada componente del color según la proporción que elijas. En modo RGB se promedian los canales rojo, verde y azul; en modo perceptual (OKLab) se interpolan la luminosidad y los dos ejes de color de OKLab, lo que da transiciones más uniformes.

Con pintura, verde. En pantalla, mezclando en RGB al 50 %, un gris neutro (#808080 con azul y amarillo puros), porque la luz se mezcla de forma aditiva y los canales se compensan. Si necesitas un verde, añádelo como color intermedio.

Un morado. Con rojo y azul puros al 50 % en RGB obtienes #800080; en modo perceptual, el morado sale más claro. Cuanto más peso le des al azul, más frío será el resultado.

Es una función nativa de CSS que mezcla dos colores directamente en el navegador, por ejemplo color-mix(in srgb, #E53935 50%, #1E88E5). Funciona en todos los navegadores modernos. La herramienta genera ese código y también el color HEX equivalente, por si necesitas un valor fijo.

Sí. La pestaña Degradado genera un linear-gradient() entre el Color A, la mezcla y el Color B. Si necesitas más paradas o degradados radiales y cónicos, usa el generador de degradados.

El círculo cromático calcula colores relacionados a partir de un único color base, según reglas de teoría del color. El mezclador combina dos colores concretos que tú eliges y calcula el punto intermedio entre ambos, no una paleta completa.

Los pasos definen cuántos tonos tiene la escala entre A y B, de 3 a 12. El balance desplaza esos tonos hacia uno de los dos colores, útil si quieres más matices cerca del Color A o del Color B. Haz clic en cualquier tono de la escala para copiarlo.

Sí. Debajo de la herramienta tienes el color mezclado en RGB, HSL, HSB, CMYK, LAB, LCH y más formatos, y el botón Exportar colores descarga la escala completa para Tailwind, Figma o CSS.

Más herramientas