# El efecto duotono: haz que cualquier foto sea de marca en dos colores [Canonical HTML page](https://gradiently.design/es/guide/duotone-effect) El duotono convierte cualquier foto en dos colores a tu elección: uno para las sombras, otro para la luz. Es la forma más rápida de que fotos que no encajan parezcan de una misma marca. ## The short version - El efecto duotono vuelve a colorear una foto con dos colores, llevando sus tonos más oscuros a un color y sus tonos más claros a otro. - Un duotono funciona convirtiendo la foto a escala de grises y sustituyendo cada gris por el punto equivalente de un degradado de dos colores. - El color de las sombras debe ser mucho más oscuro que el de las luces, o la foto pierde su forma. - El duotono es ideal para que fotos de distintas fuentes se vean coherentes y de marca, y para poner texto sobre imágenes. - En CSS, un filtro SVG con feColorMatrix y feComponentTransfer produce un duotono verdadero sobre cualquier imagen. 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. - Medianoche y oro: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Azul marino y coral: `linear-gradient(90deg, #0f1b3d 0%, #ff8a70 100%)` - Bosque y menta: `linear-gradient(90deg, #0b3d2e 0%, #b8f2d0 100%)` - Ciruela y melocotón: `linear-gradient(90deg, #3b0a45 0%, #ffc9a3 100%)` - Espresso y limón: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Granate y rubor: `linear-gradient(90deg, #3f0d12 0%, #fbcfe8 100%)` - Verde azulado y crema: `linear-gradient(90deg, #073b4c 0%, #f6ecd9 100%)` - Violeta y cian: `linear-gradient(90deg, #2e1065 0%, #67e8f9 100%)` Cada franja es un duotono que se lee de izquierda a derecha: las sombras de una foto toman el color de la izquierda, sus luces el de la derecha, y todo lo demás el color intermedio. 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](https://gradiently.design/es/guide/gradient-map). ## Cómo elegir una pareja de colores para el duotono 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. **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. **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](https://gradiently.design/es/guide/muddy-gradients). 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. **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. ### Parejas débiles - Dos colores de luminosidad parecida, como rojo y azul - Un color de sombras claro que lava la foto - Tonos opuestos que vuelven grises los tonos medios - Luces de neón que hacen que la piel parezca enferma ### Parejas fuertes - Unas sombras casi negras y unas luces pálidas - Tonos que siguen siendo coloridos en el punto medio - Un color tomado de la paleta de la marca - Luces cálidas para las personas y frías para los lugares | Ambiente | Sombras | Luces | | --- | --- | --- | | Cálido y editorial | Ciruela `#3b0a45` | Melocotón `#ffc9a3` | | Clásico y premium | Medianoche `#1b134f` | Oro `#fad084` | | Fresco y natural | Bosque `#0b3d2e` | Menta `#b8f2d0` | | Tranquilo y literario | Verde azulado `#073b4c` | Crema `#f6ecd9` | | Fuerte y eléctrico | Violeta `#2e1065` | Cian `#67e8f9` | Parejas de partida por ambiente. Cambia un lado por el color de tu propia marca y mantén la diferencia de luminosidad. ## 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](https://gradiently.design/es/guide/text-over-image) - **Coherencia de marca:** cada imagen repite tus colores, lo que crea reconocimiento; mira [coherencia de marca](https://gradiently.design/es/guide/brand-consistency) - **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. ```html Portrait ``` Medianoche y oro como filtro SVG. `color-interpolation-filters="sRGB"` mantiene los colores exactamente como se especifican. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) 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. ## FAQ ### ¿Qué es el efecto duotono? El efecto duotono vuelve a colorear una foto con dos colores: sus sombras pasan a ser un color y sus luces otro, con los tonos medios mezclados entre ambos. ### ¿Qué colores funcionan mejor para el duotono? Un color de sombras muy oscuro y un color de luces muy claro, con tonos que sigan siendo coloridos en el punto medio, como azul marino y coral o ciruela y melocotón. ### ¿Cómo hago una imagen duotono en CSS? Usa un filtro SVG: `feColorMatrix` para convertir a escala de grises y luego `feComponentTransfer` con valores de tabla para los colores de las sombras y las luces. ### ¿Cuál es la diferencia entre un duotono y un mapa de degradado? Un duotono es un mapa de degradado con exactamente dos colores. Un mapa de degradado puede usar tres o más colores a lo largo del mismo rango tonal. ### ¿Por qué mi duotono se ve plano? Los dos colores son demasiado parecidos en luminosidad. Haz más oscuro el color de las sombras o más claro el de las luces.