TL
Tool Lab
💰Donar
💰Donar

Mezclador de Colores

Mezcla dos colores y explora el degradado completo entre ellos. Ajusta la proporción para obtener la mezcla exacta.

Color 1
Color 2
Proporción de mezcla — 50% Color 1 : 50% Color 2
Color mezclado
HEX: #A79C98
RGB: rgb(167, 156, 152)
HSL: hsl(16, 8%, 63%)
Escala de gradiente (clic para copiar)
#FF6B6B
#E27B7A
#C48C89
#A79C98
#89ACA6
#6CBDB5
#4ECDC4

Acerca de esta herramienta

El Mezclador de Colores combina dos colores hexadecimales en el espacio RGB, produciendo una mezcla suave en cualquier proporción entre 0% y 100%. La escala de gradiente muestra 7 pasos uniformes entre los dos colores.

La mezcla RGB es la misma operación que realiza un navegador al componer colores, matemáticamente exacta y predecible. El color mezclado al 50% es el punto medio real entre ambos colores en el espacio RGB.

Cómo usar

  1. Elige dos colores usando los selectores de color o escribe códigos hex directamente.
  2. Usa los botones de preajuste para probar combinaciones de colores clásicas.
  3. Arrastra el control deslizante de proporción para ajustar la mezcla. 0% da el Color 1; 100% da el Color 2.
  4. Haz clic en cualquier muestra de gradiente o en el botón Copiar HEX para copiar un color.

Casos de uso

Los diseñadores UI mezclan el color principal de una marca con blanco o negro para generar colores de estado accesibles. Los diseñadores de movimiento eligen colores intermedios para animaciones de fotogramas clave. Los desarrolladores frontend generan puntos de gradiente sin necesidad de un editor gráfico.

Preguntas frecuentes

  • ¿Es igual que el gradiente CSS?Sí. CSS linear-gradient también mezcla en sRGB por defecto. Los pasos mostrados corresponden exactamente a los puntos intermedios que atraviesa un gradiente CSS.
  • ¿Por qué mezclar rojo y azul no da púrpura?En RGB, rojo (#ff0000) y azul (#0000ff) al 50% da #7f007f (magenta oscuro). Un púrpura vibrante requiere mezclar rojo con un azul-violeta como #8000ff.
  • ¿Puedo obtener más pasos de gradiente?La escala siempre muestra 7 pasos. Usa el control deslizante de proporción para inspeccionar cualquier punto intermedio específico.
  • ¿Admite alfa/transparencia?No, esta herramienta solo funciona con colores hex sólidos.