Mezclador de colores — Mezcla dos colores

Mezcla dos colores de pantalla

Mezclar colores es útil cuando necesitas un estado hover entre dos tokens, el punto medio de un degradado, un color de transición para un gráfico o una exploración rápida de cómo se relacionan dos colores de marca. Este mezclador de colores combina los dos colores seleccionados interpolando sus canales rojo, verde y azul. Mueve el control de proporción hacia el Color B para aumentar su peso y copia el resultado como HEX, RGB o HSL para CSS, documentación o design tokens.

La mezcla RGB describe cómo las pantallas combinan la luz. Eso la hace ideal para el trabajo web, pero no es lo mismo que mezclar pinturas o tintas: el punto medio entre azul y amarillo en pantalla no se comporta como la misma mezcla de pigmentos físicos. Para el diseño de interfaces, sin embargo, la mezcla RGB es práctica porque el navegador muestra los colores como valores de pantalla. La vista previa se actualiza al instante para que valores el resultado antes de copiarlo.

Usar proporciones en el diseño de interfaces

La proporción controla el equilibrio entre los dos colores de entrada. Con 0 por ciento el resultado es el Color A; con 100 por ciento, el Color B. Los valores de entre 10 y 25 por ciento suelen ser útiles para estados hover sutiles o superficies teñidas, porque el color original sigue dominando. Los valores cercanos al 50 por ciento son mejores para paletas de transición, puntos medios de degradados y escalas de color en gráficos. Si el resultado se ve apagado, prueba a aumentar la saturación en HSL o elige colores de origen más distantes entre sí.

Copiar tokens de color fiables

Cuando encuentres una mezcla útil, copia el formato que mejor encaje con tu flujo de trabajo. HEX es compacto para entregar diseños, RGB resulta útil cuando necesitas valores de canal o superposiciones con alfa, y HSL es más fácil de ajustar por tono, saturación o luminosidad después de mezclar. Como la herramienta funciona en local, puedes experimentar con seguridad con paletas de marca sin publicar o colores de clientes. Prueba siempre el color mezclado final en contexto, sobre todo si se usará detrás de texto o junto a colores de estado importantes.