Mezclador de colores
NuevoMezcla dos colores en cualquier proporción y copia el resultado o cualquier paso.
Click a swatch to copy its hex.
Mix colors from an image
Upload an image, choose a target color above, then click the image to sample that pixel. Images are decoded in your browser and never uploaded.
Paint (subtractive) results are realistic approximations of pigment mixing, not exact recipes — real paints and inks vary by brand and opacity.
Runs entirely in your browser. Nothing is uploaded.
Un mezclador de colores online gratuito para pintura o luz
Este mezclador de colores combina dos colores —o más— en uno nuevo y muestra el gradiente completo de pasos entre ellos. Elige colores con las muestras, escribe un código hex, o extráelos directamente de una imagen cargada; luego lee el resultado mezclado en HEX, RGB, HSL y CMYK. Todo funciona en tu navegador, así que es instantáneo y nada de lo que cargues se sube a ningún servidor.
Donde la mayoría de las herramientas solo hacen una mezcla lineal plana, esta te permite mezclar dos colores online de tres maneras diferentes y muestra la diferencia mientras avanzas, para que obtengas el resultado que espera un pintor, el que produce una pantalla, o un punto medio matemático puro para gradientes y sistemas de diseño.
Sustractivo, aditivo o mezcla simple — tres modelos de mezcla
La mezcla sustractiva modela pintura y pigmento: los colores absorben (restan) luz, así que azul + amarillo = verde, rojo + amarillo = naranja y rojo + azul = morado — los resultados intuitivos de 'qué dos colores hacen X' que coinciden con pinturas físicas, tintas e impresión CMYK. La mezcla aditiva modela la luz: rojo, verde y azul se suman, así que rojo + verde = amarillo y los tres juntos hacen blanco — como funcionan las pantallas, proyectores y luces de escenario.
El tercer modo, Mezcla, es una interpolación lineal recta que promedia los canales RGB para encontrar el punto medio numérico exacto — ideal para gradientes, tintes de interfaz y generación de tokens de diseño. Un único interruptor cambia entre los tres, y la tira de mezcla se redibuja de inmediato para que puedas ver cómo una mezcla de pintura azul a amarilla pasa por un verde realista en el punto medio sustractivo.
¿Qué dos colores hacen verde, naranja, morado y marrón?
La tabla de mezcla de colores integrada responde a las preguntas de pigmento más buscadas con un solo toque: verde de azul + amarillo, naranja de rojo + amarillo, morado de rojo + azul, aguamarina de azul + verde, y un marrón realista de dos colores complementarios como naranja + azul. Toca cualquier par en la tabla para cargarlo en el mezclador en modo sustractivo y ver el resultado hex exacto.
Porque el motor sustractivo mezcla como realmente lo hacen los pigmentos, los secundarios salen fieles y los terciarios se oscurecen naturalmente hacia el marrón — el mismo enturbiamiento que obtienes cuando mezclas pintura real en exceso. El control deslizante de proporción te permite controlar las proporciones con precisión: 70% rojo + 30% azul da un morado más cálido y más magenta que una mezcla 50/50.
Mezcla desde una imagen — y mezcla más de dos colores
Sube cualquier foto y usa el cuentagotas para extraer colores directamente de ella — perfecto para igualar un color de marca de una fotografía de producto, una muestra de pintura o una imagen inspiradora. Elige dos o más píxeles y mézclalos. La imagen se decodifica localmente en un lienzo HTML, por lo que un mezclador de colores desde imagen aquí significa que tu archivo nunca abandona el dispositivo — apto para activos de marca confidenciales y bocetos de diseño no publicados.
¿Necesitas combinar más de dos? Haz clic en 'Añadir color' para agregar un tercero, cuarto, quinto o sexto muestra, cada una con su propio control deslizante de peso. La herramienta devuelve la mezcla ponderada de todas las entradas — útil para promediar una paleta, recrear una mezcla de pintura de múltiples pigmentos, o encontrar el centro visual de un conjunto de colores de marca.
Cómo se compara con Adobe Color, Coolors y colordesigner.io
Adobe Color (color.adobe.com) está diseñado para la exploración de armonía de colores — complementario, triádico, análogo — y requiere una cuenta de Adobe que sincroniza datos con los servidores de Adobe. No tiene modelo de mezcla sustractivo (pintura) o aditivo (luz) ni control deslizante de proporción. Coolors (coolors.co) es excelente para la generación de paletas, pero su mezclador de colores solo realiza una mezcla lineal básica — equivalente al modo 'Mezcla' de esta herramienta — sin mezcla de física de pintura o luz.
colordesigner.io ofrece una mezcla lineal de dos colores y una tira de gradiente, pero solo muestra valores hex — sin RGB, HSL ni CMYK — y carece de modelos de mezcla basados en física. Esta herramienta llena el vacío: tres modelos de mezcla (sustractivo, aditivo, lineal), cuatro formatos de salida simultáneos (HEX, RGB, HSL, CMYK), muestreo de colores de imagen, hasta seis colores con controles de peso individuales y una URL compartible. Sin cuenta requerida, sin límites de uso, sin subidas al servidor.
Cada código listo para copiar — y un enlace compartible
La tarjeta de resultado muestra los valores HEX, RGB, HSL y CMYK del color mezclado más el nombre CSS más cercano, y un solo clic copia cualquiera de ellos al portapapeles. Genera de 2 a 20 muestras de puntos medios espaciadas uniformemente entre tus dos colores, copia un paso individual o toma toda la secuencia de una vez para un gradiente CSS o una rampa de colores del sistema de diseño. Una URL compartible captura tus colores, proporción y modelo para que puedas enviar una mezcla exacta a un colega o cliente.
No hay nada que instalar ni cuenta que crear. La mezcla de colores, el muestreo de imágenes y la conversión de código ocurren localmente en tu navegador — tus colores e imágenes permanecen en tu dispositivo. Marca el mezclador de colores online y combínalo con el Generador de Paletas de Colores y el Verificador de Contraste en UtiloKit para un flujo de trabajo completo sin subidas.
Frequently asked questions
¿Cómo se mezclan dos colores online?
Elige tus dos colores con las muestras o escribiendo códigos hex, selecciona un modelo de mezcla (pintura/sustractivo, luz/aditivo, o mezcla lineal simple) y arrastra el control deslizante de proporción — por ejemplo 30% / 70% — para controlar cuánto aporta cada color al resultado. El color mezclado y sus códigos HEX, RGB, HSL y CMYK se actualizan al instante; haz clic en cualquier fila de formato para copiarlo al portapapeles. No hay cuenta que crear, ninguna aplicación que instalar y ningún límite de tamaño de archivo.
¿Qué dos colores hacen verde?
Azul y amarillo hacen verde cuando mezclas pintura o pigmento (mezcla sustractiva). Establece el modelo en Sustractivo y mezcla un azul como #2563EB con un amarillo como #FACC15 para obtener un verde alrededor de #61A73A. La misma lógica sustractiva da los otros colores secundarios: rojo + amarillo = naranja, rojo + azul = morado, y los tres primarios juntos se vuelven marrón. En una pantalla, donde mezclas luz (aditivo), las reglas son diferentes — luz roja + verde = amarillo, y los tres a máxima intensidad = blanco.
¿Cuál es la diferencia entre la mezcla aditiva y sustractiva de colores?
La mezcla aditiva combina luz: los canales rojo, verde y azul se suman, así que rojo + verde = amarillo y los tres a máxima potencia = blanco. Las pantallas, proyectores y televisores funcionan así. La mezcla sustractiva combina pigmentos o tintes que absorben (restan) longitudes de onda de luz; cuanto más pigmento añades, más oscuro se vuelve. Azul + amarillo = verde, rojo + amarillo = naranja, y los tres primarios juntos producen marrón. La impresión CMYK es sustractiva. Usa el modelo sustractivo para preguntas sobre pintura y el aditivo para pantallas.
¿Cómo mezclo dos colores hex?
Escribe o pega cada código hex en su campo — con o sin el # inicial — por ejemplo #FF5733 y #33C1FF. El mezclador los combina inmediatamente en la proporción actual y devuelve el código hex resultante junto con sus equivalentes RGB, HSL y CMYK. También se acepta el código hex abreviado de tres dígitos como #F53. Haz clic en cualquier fila de resultado para copiar. También puedes ajustar el control deslizante de proporción para inclinar el peso hacia un color u otro.
¿Puedo mezclar colores desde una imagen?
Sí. Abre el panel 'Mezclar desde imagen', sube cualquier foto o captura de pantalla de diseño, luego haz clic en el lienzo para muestrear colores directamente de la imagen a tus ranuras de color. La imagen se decodifica localmente en un lienzo HTML en tu navegador con JavaScript — no se suben datos a ningún servidor y tus imágenes permanecen completamente privadas en tu dispositivo.
¿Cuántos pasos de mezcla puedo generar entre dos colores?
El control de pasos te permite generar entre 2 y 20 muestras espaciadas uniformemente entre tus dos colores de entrada. Once pasos te dan los dos extremos más nueve puntos medios — ideal para construir un gradiente CSS o una rampa de colores completa para un sistema de diseño. Haz clic en cualquier muestra individual en la tira generada para copiar su código hex, o usa 'Copiar todo' para tomar la secuencia completa como lista.
¿Es gratuito? ¿Necesito registrarme?
No. El mezclador de colores es completamente gratuito sin cuenta, sin registro, sin muro de pago y sin límites de uso. Abre la página y comienza a mezclar inmediatamente. A diferencia de algunas plataformas de diseño que bloquean la mezcla avanzada de colores detrás de una suscripción, cada función aquí — modelos sustractivos y aditivos, muestreo de imágenes, mezcla de múltiples colores, pasos de gradiente y todos los formatos de salida — está disponible gratuitamente en la primera visita.
Related tools
Ver todas las herramientas
Nuevo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Selector y conversor de color
Elige un color y conviértelo entre HEX, RGB, HSL y OKLCH.
Nuevo Verificador de contraste de color
Comprueba las relaciones de contraste WCAG AA/AAA entre el texto y el fondo.
Nuevo Generador de degradados CSS
Crea degradados CSS lineales, radiales y cónicos con vista previa en vivo.
Nuevo Generador de box-shadow CSS
Crea box-shadows CSS de varias capas con preajustes y vista previa. Copia el CSS, el valor o el estilo de React al instante.
Nuevo Generador de paletas de color
Genera paletas complementarias, análogas, triádicas y monocromáticas.