Mezclador de colores

Un mezclador de colores combina dos colores en uno nuevo y le muestra el resultado en HEX, RGB y HSL. Le das un primer color y un segundo color en cualquier sintaxis común (un código hexadecimal como #4466EE, un valor rgb() o hsl(), o un nombre CSS como coral), eliges cuánto del segundo color doblar y calcula el color mezclado al instante. También construye un gradiente de pasos intermedios entre los dos colores, para que pueda ver la transición completa en lugar de un único punto medio.

La combinación sencilla es un promedio ponderado: en una proporción del 50 por ciento, cada color contribuye por igual y la herramienta interpola cada canal rojo, verde y azul linealmente entre las dos entradas. Desliza la proporción hacia 0 y mantienes el primer color; deslízalo hacia 100 y aterrizarás en el segundo. Este es el mismo CSS matemático que usa para un gradiente de dos pasos, razón por la cual el punto medio de un gradiente de rojo a azul es el morado que informa esta herramienta.

Más allá de una mezcla simple, el mezclador ofrece los modos de mezcla separables definidos en la especificación de composición y mezcla W3C: multiplicar, pantalla, superposición, oscurecer, aclarar, diferencia y promedio. Estas son las mismas operaciones que los editores de imágenes como Photoshop y GIMP aplican entre capas. Multiplicar siempre se oscurece (el rojo multiplicado por el azul es negro), la pantalla siempre se aclara (el rojo sobre el azul es magenta) y la diferencia le brinda la distancia canal por canal entre dos colores. La relación actúa entonces como opacidad de la capa, controlando la fuerza con la que se aplica el resultado combinado sobre el primer color.

Todo se ejecuta en el lado del cliente en su navegador. Los colores que ingresa nunca salen de la pestaña y, debido a que la matemática de colores es aritmética simple, la herramienta funciona sin conexión una vez que la página se ha cargado. Los diseñadores buscan un mezclador para encontrar un color a medio camino entre un primario de marca y un neutral, para crear escalas de tinte y acento, o para obtener una vista previa de cómo se combinarán dos capas antes de comprometerse en un archivo de diseño. Los desarrolladores lo utilizan para generar paradas de gradiente, calcular estados de desplazamiento y traducir un resultado mixto directamente a un valor HEX o HSL que pueden pegar en CSS.