El efecto duotono en un sitio web

El duotono le quita al fondo sus colores de origen y le da los del sitio. La imagen conserva sus luces y sus sombras, pero primero pasa a escala de grises, y luego toma un tinte sacado de la paleta. Un vídeo rodado en azules, una foto de móvil tomada con luz amarilla, una escena generada en colores inesperados: bajo el duotono, todos hablan el mismo idioma que los títulos y los botones.

Sin

Duotono

En la demostración, la imagen de portada pizarra y cobalto del fondo «Superficies líquidas» toma los colores de esta vitrina: brasa arriba, negro abajo. Las olas, los reflejos y los huecos se quedaron en su sitio; solo cambiaron los colores.

De dónde viene el efecto

La palabra viene de la imprenta. Un duotono es una imagen en escala de grises impresa con dos tintas, casi siempre un negro y un color; con una, tres o cuatro tintas, se habla de monotono, tritono o cuadritono (Corel).

Hoy se usa sobre todo para colorear una imagen, pero el objetivo de origen era técnico: ampliar la gama de tonos. Una sola tinta negra no sabe dar los grises más claros. Confiando las altas luces a una tinta gris y las sombras al negro, el impresor gana matices en las zonas claras; imprimiendo el negro sobre el gris, obtiene un negro más denso (CreativePro, 2013).

Una pantalla no tiene tintas. El duotono de la web es, pues, una aproximación, y lo asume: la imagen se desatura, y luego se colorea con una capa que solo le toma prestada la luminosidad. El resultado se parece a un duotono impreso, sin reproducir sus curvas de tinta.

Cuándo usarlo

Ninguna de las veinticuatro maquetaciones listas del estudio lo aplica por defecto. En la biblioteca, actúa solo sobre el fondo, sea cual sea su tipo: el vídeo, su imagen de portada, las escenas de un fondo en secuencia, la imagen de arriba de un revelador, la banda de un fondo deslizante. Las fotos de las galerías conservan sus colores.

Ayuda cuando:

• los colores del fondo pelean con los del sitio: una escena rodada en azules para una marca toda en ocres, un cielo demasiado saturado bajo un título rojo;
• las imágenes vienen de todas partes y no casan entre sí;
• la marca se resume en un color fuerte, que se quiere encontrar hasta en la imagen: una asociación y su color de campaña, un festival y su cartel, una agencia creativa, un sello;
• el fondo está cargado y se quiere calmarlo sin oscurecerlo más: una imagen de un solo tono retiene menos la mirada que una imagen en color.

Mejor no ponerlo cuando el color es el tema: la cocina de un restaurante, los ramos de un florista, los lienzos de un pintor, las telas de un tapicero. Un plato que se vuelve naranja ya no da hambre. La misma prudencia con los rostros: una piel teñida de un color vivo enseguida parece rara.

La dosis justa

En la biblioteca, el medio pasa del todo a escala de grises, con un contraste subido un 12 %, y la capa de tinte se coloca al 85 % de opacidad. Su color sigue un degradado en diagonal, del color de acento del sitio arriba a su color de fondo abajo.

Este degradado tiene una consecuencia que conviene conocer. El modo de fusión color (color) toma el tono y la saturación de la capa, y la luminosidad de la imagen (MDN). Y un fondo de sitio casi negro casi no tiene saturación: hacia abajo, la imagen se queda por tanto casi gris, como en la demostración. Con un fondo de sitio de color, un azul noche, un verde botella, el duotono conserva el color hasta abajo de la pantalla.

La biblioteca solo aplica un tratamiento a la vez. Las texturas, en cambio, pueden sumarse encima, dos como mucho: la trama de puntos, también heredada de la imprenta, prolonga bien la idea.

Lo que cuesta

Al fondo se añaden dos cosas: un filtro CSS sobre el medio, y una capa quieta en fusión. Sobre la imagen de portada, el filtro se aplica una vez. Sobre un vídeo, se aplica a cada imagen de la película, lo que pide un poco de trabajo al navegador durante toda la reproducción: es la razón para quedarse en un filtro simple, grayscale(), en vez de un tratamiento imagen a imagen más fiel.

La capa de tinte, por su parte, nunca se mueve. Un navegador solo anima con poco coste la posición y la opacidad de una capa (web.dev); un tinte que cambiara con el tiempo le obligaría a repintar todo el fondo en cada imagen.

Accesibilidad

• Contraste. El duotono cambia la imagen detrás del título de la primera pantalla, y el contraste subido puede crear altas luces donde no las había. Mide el contraste del título sobre la imagen teñida, en el lugar más claro: al menos 4,5 a 1 para el texto corriente, y 3 a 1 para un título grande (W3C, WCAG 2.2).
• Movimiento reducido. El duotono no se mueve. Cuando el visitante pide a su aparato menos animación (prefers-reduced-motion), el vídeo de fondo se borra y su imagen de portada se queda: la portada está teñida como el vídeo, y la página conserva sus colores.
• Sin destellos. El tinte es fijo: no late y no cambia con el tiempo.

Cómo está hecho

Bastan dos reglas. La primera pasa el medio a escala de grises, grayscale(1) significa una conversión completa (MDN), y sube un poco su contraste. La segunda coloca una capa de color sobre el fondo en modo de fusión color. Esta capa es un pseudoelemento, ::after: la hoja de estilos la dibuja ella misma, y la página no necesita ningún elemento para ello. Donde va la clase, va el tinte.

.fond.fond--duotone .fond__video,
.fond.fond--duotone .fond__canevas,
.fond.fond--duotone .fond__affiche,
.fond.fond--duotone .fond__scene,
.fond.fond--duotone .fond__dessus,
.fond.fond--duotone .fond__bande { filter: grayscale(1) contrast(1.12); }

.fond.fond--duotone::after {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: color;
  background: linear-gradient(160deg, var(--accent), var(--bg));
  opacity: var(--duotone, .85);
}

Las dos reglas exigen la clase fond además de fond--duotone. Perdida en otra etiqueta, en el cuerpo de la página por ejemplo, la clase no hace por tanto nada: sin esta protección, la capa de tinte cubriría el texto de toda la página.

El orden cuenta. Sin la desaturación previa, una capa en fusión color deja pasar a manchas los colores más vivos de la imagen de origen: por eso la biblioteca pasa primero por el filtro. Y como el tinte lee --accent y --bg, cambiar la paleta del sitio cambia el color del fondo.

En el estudio

El duotono es uno de los tres tratamientos de la biblioteca, apartados de las diez texturas porque cambian la imagen en vez de colocarse encima. No tiene etapa propia en el recorrido, y ninguna de las veinticuatro maquetaciones listas lo aplica por defecto.