El efecto duotono: haz que cualquier foto sea de marca en dos colores

El efecto duotono vuelve a colorear una foto con solo dos colores: sus sombras pasan a ser un color y sus luces otro, y cada tono intermedio se mezcla a partir de los dos. Un retrato en índigo profundo y oro cálido, una ciudad en verde bosque y menta. Como todas las imágenes acaban en los mismos dos colores, el duotono es la forma más rápida de que fotos de distintas cámaras, épocas y fuentes parezcan de una misma marca.

Cómo funciona el efecto duotono

Un duotono es un mapa de degradado con dos paradas. Primero la foto se reduce a escala de grises, de modo que cada píxel es solo un brillo que va del negro al blanco. Luego cada brillo se sustituye por el color que ocupa el mismo punto en un degradado de dos colores: el negro pasa a ser el color de las sombras, el blanco pasa a ser el color de las luces y el gris medio pasa a ser el color que queda a medio camino. La foto conserva sus formas y su luz, pero pierde todo su color original.

Leer los duotonos como degradados facilita juzgarlos antes de tocar una foto. Si el centro de la franja se ve turbio, los tonos medios de la foto también. La técnica más amplia, con tres o más colores, se explica en mapas de degradado.

Cómo elegir una pareja de colores para el duotono

1. 1

   Haz oscuro el color de las sombras

   El color de las sombras lleva la estructura de la foto. Debe acercarse al negro en luminosidad, como un azul marino, una ciruela o un verde bosque profundos, o los rostros y los detalles se aplanarán.

2. 2

   Haz claro el color de las luces

   El color de las luces lleva la luz. Un oro pálido, un rubor, una menta o una crema mantienen la imagen luminosa. Una gran diferencia de luminosidad es lo que mantiene legible la foto.

3. 3

   Comprueba el centro

   La mayor parte de una foto son tonos medios, así que el color a medio camino de la pareja es el que más importa. Si se vuelve gris u oliva, elige unas luces de un tono más cercano al de las sombras. Mira degradados turbios.

4. 4

   Toma un color de tu marca

   Usa el color de tu marca como sombras o como luces y elige el otro para que le acompañe. Eso es lo que hace que el duotono se sienta de marca y no solo estilizado.

5. 5

   Prueba con un rostro y con un paisaje

   La piel y los cielos son donde antes se nota una mala pareja. Si ambos siguen viéndose bien, la pareja funcionará en casi todo.

Cuándo ayuda el duotono

• Fotos que no encajan: imágenes de archivo, fotos de móvil e imágenes antiguas parecen un mismo conjunto
• Texto sobre fotos: con la foto reducida a dos colores tranquilos, las palabras se asientan mucho mejor; mira texto sobre una imagen
• Coherencia de marca: cada imagen repite tus colores, lo que crea reconocimiento; mira coherencia de marca
• Pósteres y portadas: un duotono fuerte se lee de lejos y se imprime con limpieza
• Fotos flojas: la mala iluminación y el color apagado importan mucho menos una vez sustituido el color

Ayuda menos donde el color real importa: comida, moda, productos e inmuebles, donde la gente necesita ver lo que recibe. Ahí, un matiz más ligero o un lavado de color sobre una parte de la imagen cumple sin esconder los colores reales.

Cómo hacer un duotono en CSS

El método más preciso es un filtro SVG. feColorMatrix convierte la imagen a escala de grises con los pesos estándar de luminancia, y feComponentTransfer lleva cada canal del color de las sombras al color de las luces. Los valores de la tabla son el rojo, el verde y el azul de cada color divididos entre 255.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="duotone-midnight-gold" color-interpolation-filters="sRGB">
    <!-- 1. Greyscale by luminance -->
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0      0      0      1 0"/>
    <!-- 2. Map black to #1b134f and white to #fad084 -->
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.106 0.980"/>
      <feFuncG type="table" tableValues="0.075 0.816"/>
      <feFuncB type="table" tableValues="0.310 0.518"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="portrait.jpg" alt="Portrait" style="filter: url(#duotone-midnight-gold)">

Añade un tercer valor a cada lista de tableValues y tendrás un tritono, con un color de tono medio a tu elección. Es la forma más fácil de rescatar una pareja cuyo centro se vuelve turbio. Para los filtros y los efectos CSS en general, la guía de MDN sobre efectos de filtro es una buena referencia.

Duotono en herramientas de diseño

Los editores de imágenes suelen hacer el duotono con un mapa de degradado: añade un ajuste de mapa de degradado, pon la parada izquierda en el color de tus sombras y la parada derecha en el color de tus luces, y ajusta el punto medio hasta que la piel y los cielos se vean bien. Algunas herramientas ofrecen además un modo duotono específico para impresión, que prepara dos tintas reales en lugar de una imagen RGB.

En Gradiently, cualquier foto del Studio se puede teñir con los colores del Mark con el que diseñas: en mono, en duotono o como un lavado más suave. Cambia el Mark y la foto lo sigue, así que todo un conjunto de diseños se mantiene en una sola paleta.