Paso una cantidad sorprendente de mi día entre un archivo de diseño y una hoja de estilo, empujando un color hacia otro hasta que un estado de vuelo estacionario, un borde o una parada de gradiente se ve bien. Durante años hice la aritmética en mi cabeza o la miré en un selector, lo cual está bien hasta que necesitas el color exacto a medio camino entre un azul de marca y un neutro cálido y lo necesitas como un código hexadecimal que puedes pegar. Entonces construí un mezclador de colores según Toolz.dev que combina dos colores con una proporción que usted controla, ofrece los mismos modos de combinación que usa un editor de imágenes y le entrega el resultado en HEX, RGB y HSL. Esta es la guía para ello y para qué "mezclar colores" significa en una pantalla.
TL;Dr: Un mezclador de colores combina dos colores en uno. La herramientaz mezclador de colores interpola dos colores con una relación ajustable, admite los modos de mezcla separables W3C (multiplicar, pantalla, superposición, oscurecer, aclarar, diferencia, promedio), crea un gradiente de pasos intermedios entre los colores y genera todos los resultados como HEX, RGB y HSL. Acepta nombres de colores hexadecimales, rgb(), hsl() y CSS, y se ejecuta completamente en el lado del cliente.
¿Cómo se mezclan dos colores en una pantalla?
La respuesta simple es un promedio ponderado de los dos colores ' canales rojo, verde y azul. Para mezclar rojo (255, 0, 0) y azul (0, 0, 255) en partes iguales, promedias cada canal: el rojo se vuelve (255+0)/2 = 128, estancias verdes 0, el azul se vuelve (0+255)/2 = 128, dando (128, 0, 128), que es el hexágono #800080, un morado sólido. Cambia el peso hacia un lado y te deslizas a lo largo de la línea entre los dos colores. Eso es exactamente lo que hace el control deslizante de proporción: al 0 por ciento mantienes el primer color, al 100 por ciento aterrizas en el segundo y al 50 por ciento es la división par.
Esta es la misma interpolación que utiliza un gradiente CSS de dos pasos, razón por la cual el punto medio de linear-gradient(red, blue) es así de morado. El mezclador hace explícita la relación dibujando también el degradado entre tus dos colores como una tira de muestras, cada una de las cuales puedes copiar como un tope intermedio. Si alguna vez has querido " tres colores espaciados uniformemente entre estos dos, " la franja degradada es la forma más rápida de obtenerlos.
Una advertencia honesta, porque sorprende a la gente: promediar los canales RGB no es cómo se mezclan los pigmentos. En una pantalla, los colores son claros y se combinan de forma aditiva; en un juego de pintura, son pigmentos y se combinan de forma sustractiva. Mezclar la luz roja y verde tiende hacia un olivo opaco en lugar del amarillo vivo que obtendrías de la pintura, porque promedias los valores de luz, no mezclas pigmentos. Esto no es un error en la herramienta, es la naturaleza de sRGB, y la solución cuando desea un resultado más animado es mezclar tonos que se asientan más juntos en la rueda. El convertidor de color es útil junto con el mezclador cuando desea ver el mismo color expresado en todos los formatos mientras razona sobre el tono.
¿cuál es la diferencia entre los modos Mezclar y Mezclar?
La mezcla es el promedio ponderado descrito anteriormente: siempre aterriza en algún lugar de la línea recta entre los dos colores. Los modos de mezcla son algo completamente distinto. Son las operaciones de combinación de capas de editores de imágenes, estandarizadas para la web en el Composición y mezcla W3C Nivel 1 especificación, y cada uno combina los canales con una fórmula diferente en lugar de un simple promedio.
| modo | Fórmula por canal (valores 0 a 1) | Efecto |
|---|---|---|
| Mezclar | b (ponderat de ratio) |
Promedio ponderado, aterriza entre los dos colores |
| Multiplicar | a x b |
Siempre más oscuro; el blanco deja un color sin cambios, el negro fuerza al negro |
| Pantalla | a + b - a x b |
Siempre más ligero; la inversa de multiplicar |
| Superposición | multiplicar o filtrar por base | Aumenta el contraste |
| Oscurecer | min(a, b) |
Mantiene el canal más oscuro |
| Aclarar | max(a, b) |
Mantiene el canal más ligero |
| Diferencia | abs(a - b) |
Distancia del canal; Los colores idénticos dan negro |
| Promedio | (a + b) / 2 |
La media no ponderada de ambos |
La intuición que vale la pena llevar: multiplicar siempre se oscurece porque multiplicar dos fracciones da una fracción más pequeña, por lo que el rojo multiplicado por el azul es negro (a cada color le falta el canal que tiene el otro). La pantalla siempre se aclara porque se aplica de forma múltiple a los valores invertidos. La diferencia te da la distancia canal por canal, por lo que mezclar un color consigo mismo bajo diferencia produce negro puro. En el mezclador, el control deslizante de relación se comporta como opacidad de capa: desvanece el resultado combinado sobre el primer color, por lo que puedes marcar el efecto de sutil a completo.
¿qué controla el control deslizante de relación?
La proporción establece con qué fuerza se aplica el segundo color, o el resultado combinado del modo elegido, sobre el primer color. Piense en ello como opacidad en la capa superior. Al 0 por ciento, la capa superior es invisible y verá el primer color intacto. Al 100 por ciento, la capa superior es completamente opaca y obtienes la mezcla completa para ese modo. Al 50 por ciento, obtienes una división uniforme. Para mezcla simple, esto se reduce al promedio ponderado familiar; para un modo como Multiply, te permite aplicar un oscurecimiento suave en lugar del efecto completo.
Ese modelo unificado es deliberado porque significa que un control deslizante hace el mismo trabajo conceptual en todos los modos. En la práctica, uso proporciones bajas para empujar un color ligeramente hacia otro (un estado flotante que es " el botón, pero 15 por ciento hacia black") y proporciones altas cuando quiero la combinación completa. El generador de gradiente continúa donde termina el mezclador cuando desea convertir un par de colores mezclados en un gradiente CSS completo de múltiples paradas.
¿Cómo obtengo el color exacto a medio camino entre dos colores?
Establezca el modo en Mezclar y la proporción en 50, y el resultado será el punto medio exacto. También puedes leerlo directamente desde la franja degradada: la muestra central es el color medio. Cuando necesite varios colores espaciados uniformemente entre dos puntos finales, aumente el recuento de pasos del gradiente y copie las muestras en las posiciones que desee. Esta es la tarea diaria para la que se creó el mezclador, ya sea que esté generando tintes para una paleta, espaciando colores de visualización de datos o encontrando el neutro que se encuentra entre dos colores de marca.
Para construir familias enteras de un solo color en lugar de mezclar dos, el generador de tonos de colores es el mejor ajuste, ya que mezcla un color con blanco, negro y gris para producir tintes, tonos y tonos. Y cuando elija colores para texto o interfaz de usuario, ejecute el resultado a través de selector de color y una verificación de contraste, porque un color que se mezcla maravillosamente aún puede fallar en un umbral de legibilidad. El flujo de trabajo más amplio, desde la selección hasta la verificación y el envío, se establece en el Kit de herramientas para desarrolladores web guía.
¿por qué mis colores mixtos a veces parecen turbios u oscuros?
Dos cosas causan esto, y ambas tienen que ver con el espacio de color más que con la herramienta. La primera es la discrepancia entre aditivos y sustractivos ya mencionada: el promedio de tonos distantes en RGB se desplaza hacia el gris, por lo que los colores opuestos en la rueda se mezclan con algo opaco. La segunda es que los valores sRGB primero se convierten en espacio gamma, no en luz lineal. Un verdadero promedio físico de luz primero se convertiría en espacio lineal, se promediaría y luego se volvería a convertir, lo que mantiene los puntos medios más brillantes. La mayoría de las herramientas, gradientes CSS y editores de imágenes se interpolan directamente en sRGB codificado gamma porque es rápido, predecible y coincide con lo que los diseñadores esperan de un gradiente, por lo que este mezclador hace lo mismo. Si desea una mezcla más brillante, mezcle tonos más cercanos, inclínese en el modo Pantalla o busque un espacio perceptualmente uniforme como OKLCH en su CSS final. El herramientas en línea de privacidad de datos la guía explica por qué, con puntos medios embarrados o no, hacer estos cálculos en su navegador en lugar de en un servidor es el valor predeterminado correcto para el trabajo de diseño que preferiría mantener local.
Preguntas frecuentes
¿Cómo se mezclan dos colores?
Para mezclar dos colores, promedias sus canales rojo, verde y azul, ponderados por la cantidad de cada color que deseas. Una mezcla 50/50 de rojo (255, 0, 0) y azul (0, 0, 255) promedia (128, 0, 128), que es morado. Esta herramienta hace esa interpolación por usted y le permite cambiar el peso con el control deslizante de relación, de modo que pueda aterrizar en cualquier lugar entre los dos colores en lugar de solo el punto medio exacto.
¿cuál es la diferencia entre Mezclar y Multiplicar?
La mezcla es un promedio ponderado que aterriza entre los dos colores, por lo que mezclar rojo y azul da violeta. Multiply los combina de la misma manera que lo hacen los filtros de tinta o luz superpuestos, multiplicando los valores del canal, por lo que siempre produce un color tan oscuro o oscuro como ambas entradas. Multiplicar el rojo y el azul da negro, porque a cada color le falta el canal que tiene el otro. Multiply es un modo de combinación de edición de imágenes, no un simple promedio.
¿por qué mezclar dos colores brillantes a veces da un resultado turbio?
Porque el promedio de canales RGB mueve el resultado hacia el gris cada vez que los dos colores se encuentran muy separados en la rueda de colores. El rojo y el verde promedian un marrón oliva opaco en lugar de un amarillo vivo, ya que los colores de la pantalla se mezclan de manera clara, mientras que el amarillo vivo que se podría esperar proviene de la mezcla de pigmentos. Para obtener una mezcla más animada, mezcle colores que tengan un tono más cercano o pruebe el modo Pantalla, que mantiene los resultados más brillantes.
¿puedo mezclar colores en HSL en lugar de RGB?
Este mezclador interpola en RGB, que es lo que hacen los gradientes de CSS y los editores de imágenes de forma predeterminada, y también informa el resultado en HSL. La mezcla en RGB es predecible y coincide con cómo se representa un gradiente de CSS de dos pasos. La interpolación de tonos en HSL puede recorrer un largo camino alrededor de la rueda de colores y producir tonos intermedios inesperados, razón por la cual la interpolación RGB es el valor predeterminado más seguro para una mezcla de uso general.
¿Qué cambia el control deslizante de relación?
La relación establece con qué fuerza se aplica el segundo color, o el resultado combinado, sobre el primero. Al 0 por ciento obtienes el primer color sin cambios, al 100 por ciento obtienes el segundo color completo o la mezcla completa para el modo elegido, y al 50 por ciento obtienes una división uniforme. Para los modos de mezcla se comporta como opacidad de capa en un editor de imágenes, desvaneciendo el color mezclado sobre la base.
¿Cómo consigo el color a medio camino entre dos colores?
Establezca el modo en Mezclar y la proporción en 50 por ciento, y el resultado será el punto medio exacto. También puedes leerlo en la franja degradada, donde la muestra intermedia es el color medio. Para un control más preciso, agregue más pasos al degradado y copie cualquier muestra intermedia que coincida con la posición que necesita entre los dos colores.
¿para qué se utilizan modos de combinación como Pantalla y Superposición?
Son los modos de combinación de capas de los editores de imágenes, definidos para la web en la especificación W3C Compositing and Blending. La pantalla se aclara y se usa para brillos y reflejos, Multiply se oscurece y se usa para sombras y tintes, y Overlay aumenta el contraste al combinar los dos. Verlos previamente en un mezclador le permite predecir cómo se combinarán dos capas de colores antes de aplicarlos en CSS o una herramienta de diseño.
¿qué formatos de color acepta el mezclador?
El mezclador acepta códigos hexadecimales (tres, seis u ocho dígitos), valores rgb() y rgba(), valores hsl() y hsla() y nombres de colores CSS comunes como coral o rebeccapurple. Cada entrada tiene una muestra de color nativa en la que puede hacer clic para elegir visualmente, y cada resultado se muestra en HEX, RGB y HSL para que pueda copiar el formato que necesite su hoja de estilo.
¿la batidora de color es gratuita y privada?
Sí. El mezclador de colores es completamente gratuito, sin registro, sin marcas de agua ni límites de uso, y cada cálculo se realiza en su navegador. Los colores que ingresa nunca se cargan, por lo que nada de lo que mezcle sale de su dispositivo y, debido a que las matemáticas se ejecutan localmente, la herramienta sigue funcionando si pierde su conexión después de que se haya cargado la página.
