Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Color

Modos de Fusión en CSS: Teoría del Color y Aplicación Práctica

Read Time: 9 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Podría estar ya familiarizado con los "modos de fusión" si eres un usuario de Photoshop; estos, permiten combinar capas de diferentes maneras y es realmente divertido jugar con ellas. Los modos de fusión en CSS, sin embargo, no son compatibles de forma universal, aunque sin duda llegarán a serlo.

En este tutorial vamos a aprender cómo funcionan los modos de fusión y las distintas formas en que se pueden implementar usando los modos de fusión CSS.

Conceptos Básicos de las Fusiones

Si nunca te has topado con modos de fusión, la forma en la que funcionan te podría parecer un poco difícil. Vamos a verlo por partes.

¿Qué significan realmente los "modos de fusión"?

Los modos de fusión están disponibles en el software de diseño desde hace años, pero el concepto de los modos de fusión ha estado realmente en uso durante mucho más tiempo, incluso antes de que se inventasen las computadoras.

La parte "fusión" en los modos de fusión se refiere a coger dos colores y combinarlos de alguna manera para obtener un tercer color. Exactamente, tomamos dos mapas de píxeles y los mezclamos juntos.

La forma en la que se lleva a cabo esa fusión se corresponde con el "modo" de los modos de fusión. ¿Cómo interactúan los colores? Como estamos trabajando en un entorno digital, podemos coger cualquier fórmula matemática y aplicarla a las dos entradas para obtener una salida.

An untreated image of a jellyfishAn untreated image of a jellyfishAn untreated image of a jellyfish
Una imagen sin modificar de una medusa
The same jellyfish with a solid orange layer placed over itThe same jellyfish with a solid orange layer placed over itThe same jellyfish with a solid orange layer placed over it
La misma medusa con una capa naranja sólida (nuestra "fuente") sobre ella
Heres the orange layer with the screen blending mode appliedHeres the orange layer with the screen blending mode appliedHeres the orange layer with the screen blending mode applied
Aquí tienes la capa de origen con la "pantalla" del modo de fusión aplicada.

Realizar las Operaciones Matemáticas

Si eres realmente ambicioso, echa un vistazo al documento oficial de composición del grupo W3C FX Task Force que explica las matemáticas puestas en práctica para conseguir cada uno de los distintos modos de fusión. En él se demuestra la fórmula utilizada para calcular la mezcla.

Cm = B (Cb, Cs)
  • Aquí, Cm es el color resultante después de fusionar.
  • B se refiere a la función de mezcla.
  • La variable Cb es el color de fondo.
  • Y la variable de Cs es el color de origen.

Todos los colores se basan en una escala 0-1, que se asigna directamente a un valor rgb 0-255.

Existen dos categorías en los modos de fusión. Las primeros se consideran "inseparables", y la segundas (como era de esperar) se consideran "separables" o independientes. Si un modo de fusión se considera separable o no está determinada por el algoritmo subyacente. Si el algoritmo trata a cada uno de los canales de color de forma independiente (rojo, verde y azul) por igual, se considera inseparable. Si usa cada uno de los canales de color de forma individual, se considera separables.

Todos los modos de fusión sólo devuelven colores que están dentro del rango de 0 a 255. Todo lo que este fuera de rango sea en la dirección que sea, será ajustado a la gama. Cuando ves grandes áreas de blanco o negro en una zona de fusión, probable sea porque en esas zonas se ha recortado la gama.

Tipos de Modos de Fusión Disponibles en CSS

Los modos de fusión CSS, cuando son admitidos, funcionan de dos formas diferentes. El primer tipo de modo de fusión se denomina background-blend-mode. Esta propiedad te permite mezclar todos los fondos dentro de un elemento entre sí.

Si has definido, por ejemplo, múltiples imágenes de fondo (soportadas en todos los navegadores más allá de IE8), la primera imagen del fondo será tratada como la capa de origen, y cualquier imagen añadida después,  situada debajo, será tratada como capa de fondo.

Añadir un color de fondo (que debe ser el último en la lista) coloca una nueva capa en la parte inferior. El color será tratado como capa de fondo y las imágenes como las capas de orígen. Usando, por ejemplo, la siguiente regla de estilo:

Obtenemos lo siguiente:

Y después podemos añadir los modos de fusión a la mezcla:

Aquí tienes dos divs que usan estos estilos, uno sin el modo de fusión, y la segunda con él:

Un tipo de modo de fusión secundario, mix-blend-mode, permite mezclar elementos independientes. La norma sobre la aplicación es más específica, pero la fusión se produce en contextos de "apilamientos".

Esto es lo que ocurre cuando usamos mix-blend-mode, tratando de fusionar la imagen de fondo y el color situados dentro de un mismo elemento (muy poco):

A continuación, encontrarás una demo interactiva para explorar los efectos de un modo de fusión dado.

Modos de Fusión Independientes

Echemos un vistazo a los modos de fusión disponibles, examinando la fórmula, y aplicando a cada uno de ellos al círculo rojo situado sobre nuestras medusas.

Sin aplicar modo de fusión

Pantalla:

Se denomina pantalla al concepto de proyectar varias exposiciones de múltiples fotos al mismo tiempo en una sola pantalla. El color resultante siempre es como mínimo tan claro como cualquiera de las capas mezcladas.

Screen blend modeScreen blend modeScreen blend mode
Pantalla que muestra el resultado del modo de fusión

Oscurecer:

Selecciona el color más oscuro de los dos.

Darken blend modeDarken blend modeDarken blend mode
Modo de fusión oscurecer 

Aclarar:

Selecciona el más claro de los dos colores.

Lighten blend modeLighten blend modeLighten blend mode
Resultado del modo de fusión aclarar

Sobreexposición de color:

La sobreexposición de color aclara el color de fondo para reflejar el color de origen.

Color dodge blend modeColor dodge blend modeColor dodge blend mode
Modo de fusión sobreexposición de color 

Subexposición de color:

La subexposición de color oscurece el color de fondo, aumentando el contraste entre la capa de origen y el color de fondo.

Color burn blend modeColor burn blend modeColor burn blend mode
Modo de fusión subexposición

Luz fuerte:

Aplica "multiplicar" en los colores más claros y "pantalla" en los colores más oscuros. Esencialmente, "luz fuerte" es lo contrario de "superponer", que sera el que vamos a ver a continuación.

Hard light blend modeHard light blend modeHard light blend mode
Modo de fusión luz fuerte

Superposición:

Aplica el modo de fusión "pantalla" en los colores más claros y "multiplicar" en los colores más oscuros; igual que el efecto de "luz dura", con la excepción de que los argumentos de la función están invertidos.

Overlay blend modeOverlay blend modeOverlay blend mode
Modo de fusión superposición

Luz suave:

Este modo de fusión aplica una variante de "multiplicar" en los valores oscuros y una variante de "pantalla" en los valores más claros (similares a la pantalla).

En este algoritmo, vemos una función secundaria D que se establece en la cláusula with basada en el valor azul presente en el color. El resultado final suele ser un efecto mucho más suave que la "superposición".

Sof light blend modeSof light blend modeSof light blend mode
Modo de fusión luz suave

Diferencia:

Diferencia toma el valor absoluto de la diferencia entre los dos colores, que tiene el efecto de una foto en negativo.

Difference blend modeDifference blend modeDifference blend mode
Modo de fusión diferencia

Exclusión:

El modo de exclusión tiene básicamente el mismo efecto que el modo «diferencia», excepto que los colores similares dan como resultado un valor medio de contraste menor (en lugar de un valor más oscuro).

Exclusion blend modeExclusion blend modeExclusion blend mode
Modo de fusión exclusión

Modos de Fusión Inseparables

Los modos de fusión "inseparables" utilizan algunas funciones adicionales, incluyendo una función ClipColor, una SetLum y otra Sat.

Nota importante: ninguna versión de Safari admite los modos de fusión "hue", "saturación", "color", o "luminosidad" con mix-blend-mode o background-blend-mode.

Advierte que las funciones min, mid y max hacen referencia a los valores mínimos, medios y máximos. (Mid no es la media de los tres valores.) Los valores de Cred, Cgreen y Cblue hacen referencia a los valores de rojo, verde y azul en color C.

Con estas definiciones, ahora podemos ver los modos de fusión inseparables.

Hue:

Este modo aplica el color de la capa de origen a la luminancia y la saturación del color de fondo.

Hue blend modeHue blend modeHue blend mode
Modo de fusión hue

Saturación:

Este modo hace lo mismo que el modo "matiz", pero en su lugar aplica la saturación del primer plano al color y la luminancia del fondo.

Saturation blend modeSaturation blend modeSaturation blend mode
Modo de fusión saturación

Color:

Aplica el tono y la saturación de primer plano a la luminancia del fondo.

Color blend modeColor blend modeColor blend mode
Modo de fusión color

Luminosidad:

Este modo aplica la luminosidad de la capa de origen con el tono y la saturación de la capa de fondo.

Luminosity blend modeLuminosity blend modeLuminosity blend mode
Modo de fusión luminosidad

Conclusión

Los modos de fusión en CSS ofrecen una nueva y emocionante flexibilidad para el diseño y experiencias estéticas únicas. Comprender las matemáticas y la teoría del color que se aplica a cada uno de los modos de fusión disponibles te proporcionará un conjunto de herramientas más holístico.

¿Qué harás conforme los navegadores vayan añadiendo soporte a estos modos de fusión?

Enlaces relacionados

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.