Simulador de Modos de Fusión
Previsualiza cómo interactúan dos colores en Multiplicar, Trama, Superposición y 13 modos más
Acerca de Simulador de Modos de Fusión
Coloca un color de capa de fusión sobre un color base y muestra el resultado en 16 modos de fusión a la vez, de Normal y Multiply a Hue y Luminosity, cada uno con su valor HEX resultante y una breve explicación. Ambas capas son colores sólidos y totalmente opacos, elegidos con un selector de color o escritos como HEX de 6 dígitos. Útil para comparar modos antes de usar mix-blend-mode o background-blend-mode en CSS.
Categoría: Color.
Preguntas frecuentes
¿Qué modos de fusión incluye?
▾
Los 16 modos de fusión estándar de CSS: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color y Luminosity. Cada resultado aparece en un recuadro de color con su valor HEX y una breve descripción de lo que hace el modo.
¿Cuál es la diferencia entre Multiply (Multiplicar) y Screen (Trama)?
▾
Multiply oscurece: el blanco actúa como transparente y el negro se mantiene negro, como al apilar transparencias. Screen aclara: el negro actúa como transparente y el blanco se mantiene blanco, como al proyectar luz. Screen equivale a aplicar Multiply a los colores invertidos y volver a invertir el resultado, así que son operaciones complementarias, no inversas.
¿Qué hace Overlay (Superposición)?
▾
Overlay combina Multiply y Screen según el color base: los canales más oscuros que el 50% se multiplican con el color de fusión y los más claros se combinan con Screen. Esto aumenta el contraste y conserva las luces y sombras de la capa base.
¿Los resultados coinciden con mix-blend-mode de CSS?
▾
Con colores opacos, los modos por canal de Multiply a Exclusion siguen las fórmulas de la especificación W3C Compositing and Blending, y Color y Luminosity se ajustan mucho a ella. Hue y Saturation se calculan mediante HSL en lugar del método de la especificación, que conserva la luminosidad, así que pueden diferir notablemente de lo que muestran los navegadores o Photoshop.