Mezclador de colores

Mezcla dos colores con un control de proporción y lee la escala completa de 11 pasos entre ellos, en tu navegador.

Cómo usar

  1. Elige los dos colores con los selectores, o escribe códigos hex como #ffcc00 y #0044cc.
  2. Elige el modo de mezcla — RGB para la luz, como mezclan las pantallas, o Pintura para la aproximación sustractiva — y arrastra el control para fijar la proporción.
  3. Inspect the blended colour: its hex and RGB values appear below, and the 11-step gradient shows every shade between the two inputs.

Sobre esta herramienta

Dos colores se pueden mezclar de dos formas completamente distintas, y esta herramienta muestra ambas. Las pantallas mezclan luz: suman rojo, verde y azul, y por eso la luz roja más la verde da amarillo y por eso todos los colores de esta página son, en el fondo, un trío RGB. La pintura mezcla al revés: cada pigmento resta longitudes de onda a la luz blanca que lo ilumina, y por eso la respuesta de clase a «amarillo más azul» es verde, y por eso esos mismos dos colores mezclados como luz dan un gris neutro. Elegir el modelo mental equivocado es la razón habitual de que un color mezclado salga más turbio o más pálido de lo esperado.

El modo RGB hace exactamente lo que dice: interpola linealmente cada uno de los tres canales entre los dos colores, en el mismo espacio sRGB que usan tu CSS y tus herramientas de diseño, así que el 50% entre #ff0000 y #0000ff es #800080. El modo Pintura convierte primero ambos colores al espacio RYB de la rueda de color del artista, interpola ahí y devuelve el resultado a RGB — esa conversión es lo que hace que el amarillo y el azul se encuentren en el verde. Ten claro qué es y qué no es ese modo: la mezcla real de pigmentos se rige por absorción y dispersión (el modelo Kubelka-Munk) y depende de la opacidad, del tamaño de partícula y del aglutinante, así que ninguna fórmula lineal la reproduce. El modo Pintura es un modelo fiel de la rueda de color, no una simulación de pintura real.

La escala de 11 pasos que hay bajo el resultado suele ser más útil que el color mezclado suelto: te da la rampa completa de un color al otro en incrementos del 10%, lista para usar como paradas de un degradado, como estados intermedios entre dos colores de marca o como los pasos de una paleta secuencial de gráficos. Haz clic en cualquier muestra para copiar su hex. Todo — las conversiones, la interpolación y la escala entera — se calcula 100% en tu navegador con JavaScript puro; ningún color que escribas se envía a ninguna parte.

Preguntas frecuentes

¿Cuál es la diferencia entre los modos RGB y Pintura?

RGB mezcla luz de forma aditiva, como hace una pantalla, así que interpola cada canal directamente; Pintura aproxima la mezcla sustractiva a través de la rueda RYB del artista. La prueba clásica es amarillo más azul: RGB da un gris neutro, Pintura da verde.

¿El modo Pintura coincidirá con lo que pasa en mi paleta?

Más o menos, pero no exactamente. Los pigmentos reales se mezclan por absorción y dispersión de la luz, y el resultado depende de la opacidad, de la carga de pigmento y del aglutinante — ninguna fórmula lineal reproduce eso. Toma el modo Pintura como la respuesta de la rueda de color, útil para decidir en diseño, no como un simulador de pintura.

¿Qué controla en realidad el control de proporción?

Fija cuánto entra de cada color en la mezcla: al 30%, el resultado es 70% del color A y 30% del color B. Al 0% y al 100% recuperas los dos colores originales intactos.

¿Para qué sirve la escala de 11 pasos?

Es la rampa completa entre los dos colores en pasos del 10% — práctica para paradas de degradado, estados hover y activo, paletas de gráficos o cualquier sitio donde necesites colores intermedios consistentes. Al hacer clic en un paso se copia su código hex.

¿Mis colores salen de mi navegador?

No. La mezcla se ejecuta por completo en JavaScript en tu dispositivo — los códigos hex que escribes nunca se suben, ni se registran, ni se almacenan en ningún servidor.

Herramientas relacionadas

¿Enlaces largos? Acórtalos gratis

Vai.la convierte cualquier URL en un enlace corto con estadísticas de clics, código QR y tu propio biolink.

Vai.la no se hace responsable del uso de las herramientas ni de las decisiones tomadas a partir de sus resultados.