# Fotos en duotono con tus colores de marca: monocromo, duotono y velo

[Canonical HTML page](https://gradiently.design/es/guide/photo-duotone-in-mark-colours)

Las fotos que no combinan son la forma más rápida de que un feed parezca prestado. Teñirlas con tus propios colores convierte fotos de stock, tomas de móvil y fotos de producto en una sola familia.

## The short version

- Una foto en duotono sustituye los tonos de una imagen por dos colores: uno para las sombras y otro para las luces.
- En Gradiently, cualquier foto puede teñirse en monocromo, duotono o velo, y el duotono y el velo toman sus colores del Mark del diseño.
- Teñir las fotos con los mismos colores que el fondo hace que fuentes variadas, del stock a las tomas de móvil, parezcan un conjunto deliberado.
- Las fotos también se pueden ajustar en luz y color, terminar con filtros como Película o Noir y recortar en arcos, círculos y manchas.
- Cada ajuste de foto sigue siendo editable, así que puedes cambiar el tinte o el Mark más adelante y la foto lo sigue.

Una **foto en duotono** cambia los colores naturales de una imagen por dos elegidos: un color oscuro para las sombras y uno claro para las luces, con cada tono intermedio fundido entre ambos. Hecho con tus colores de marca, convierte cualquier fotografía en algo que es claramente tuyo. En Gradiently puedes teñir una foto de tres maneras, monocromo, duotono o velo, y el duotono y el velo toman sus colores directamente del Mark del diseño, así que la foto y el fondo siempre coinciden.

## Cómo funciona una foto en duotono

Imagina primero la foto en blanco y negro. Cada píxel tiene un brillo del 0 al 100 por ciento. Después, un duotono pinta los píxeles más oscuros con tu color de sombra, los más brillantes con tu color de luz y todo lo demás en el punto correspondiente de la rampa entre ambos. El resultado conserva todo el detalle de la foto, pero nada de su color original.

- Índigo a rubor: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Verde azulado profundo a arena: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Sangre de buey a mantequilla: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Azul marino a hielo: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Cuatro rampas de duotono. Las sombras toman el color de la izquierda, las luces el de la derecha y los tonos medios de la foto caen en el centro.

El truco para que un duotono quede bien y no turbio es el contraste entre los dos extremos. Una sombra muy oscura y una luz muy clara mantienen legibles caras y productos. Dos tonos medios producen una imagen plana y apagada. Para la historia y los usos más amplios del estilo, consulta [el efecto duotono](https://gradiently.design/es/guide/duotone-effect).

## Monocromo, duotono y velo: tres formas de teñir

| Tinte | Qué hace | Colores de | Úsalo para |
| --- | --- | --- | --- |
| **Monocromo** | Pasa la foto a blanco y negro | Grises neutros | Retratos, citas, todo lo serio o atemporal |
| **Duotono** | Asigna sombras y luces a dos colores | El Mark | Publicaciones contundentes, carteles de eventos, fotos de equipo que no combinan |
| **Velo** | Pone el color del Mark sobre la foto conservando parte del suyo | El Mark | Fotos de producto y comida, donde el sujeto debe seguir pareciendo real |
| Ninguno | Deja el color de la foto como está | La foto | Fotos principales de producto donde importa la exactitud del color |

Las opciones de tinte en la edición de fotos. Duotono y Velo usan los colores de tu Mark, así que cambiar de Mark vuelve a teñir la foto.

Una publicación vertical titulada Conoce al equipo con una línea sobre cinco personas y una cafetera, sobre un Mark de degradado cálido

El tipo de publicación que rescata un duotono: fotos de equipo hechas con móviles distintos, unidas en un conjunto por los colores del Mark.

Una publicación vertical de producto que anuncia una mezcla de café de otoño sobre el mismo Mark de degradado

Una publicación de producto: de esas en las que un velo suave une la foto al fondo pero el café sigue pareciendo café.

## Cómo hacer una foto en duotono en Gradiently

1. **Añade la foto** Sube o pega una tuya, o elige una de las fotos de stock gratuitas en el Studio.
2. **Abre la edición de fotos** Selecciona la foto y abre su panel de edición, donde están la luz, el color, los filtros y el tinte.
3. **Elige Duotono en Colores del Mark** La foto se reasigna al instante a la paleta del Mark. Prueba también Velo y Monocromo; comparar no cuesta nada.
4. **Ajusta el contraste** Sube el contraste si el resultado se ve plano, y el brillo si las caras caen en el color de sombra.
5. **Recórtala en una forma** Enmárcala como cuadrado, círculo, arco o mancha según la maquetación.
6. **Cambia de Mark para probar** Cambia el Mark del diseño y el tinte lo sigue, así que puedes probar varios estilos con la misma foto.

> **Todo sigue siendo editable** Los tintes y filtros nunca se fijan en la foto. Puedes cambiarlos o restablecerlos en cualquier momento, algo que importa cuando una campaña cambia de color a mitad de camino.

## Filtros, luz y color para el acabado

El tinte fija la familia de color; los demás ajustes deciden la sensación. Están en tres grupos, y los ajustes predefinidos son una forma rápida de empezar antes de afinar. Si la foto es de producto, resuelve primero el fondo: [fondos para fotos de producto](https://gradiently.design/es/guide/product-photo-backgrounds) lo explica.

| Grupo | Controles | Qué usar |
| --- | --- | --- |
| Luz | Brillo, contraste | El contraste primero en cualquier duotono; separa los dos colores |
| Color | Saturación, temperatura, verde a magenta, tono | La temperatura para calentar o enfriar un velo; no toques la saturación en un duotono |
| Acabado | Desenfoque, viñeta | Una viñeta ligera lleva la mirada hacia dentro en los retratos |
| Predefinidos | Original, Vivo, Suave, Cálido, Frío, Desvaído, Noir, Película | Película o Desvaído bajo un velo dan un aire impreso con facilidad |

Controles de edición de fotos. Empieza con un predefinido y ajusta la luz antes que el color.

## Formas de recorte: arcos, círculos y manchas

Una foto teñida dentro de una forma suave se lee como diseñada y no como pegada. Los arcos resultan arquitectónicos y serenos, preciosos para interiorismo, floristerías y bodas, y encajan de forma natural en el [branding para fotógrafos](https://gradiently.design/es/guide/photographer-branding). Los círculos van bien con personas: páginas de equipo, ponentes, testimonios. Las manchas son juguetonas y encajan con comida, marcas infantiles y todo lo informal. Usa una sola forma por diseño para que el conjunto se vea coherente.

### Evita

- Dos colores de tono medio que vuelven gris la foto
- Un duotono en la única foto donde el color real vende, como un vestido
- Un tinte distinto en cada foto de un carrusel
- Palabras sobre la parte más recargada de la foto

### Haz

- Un color de sombra profundo y una luz pálida
- Velo para productos, duotono para personas y lugares
- Un mismo tinte en todas las fotos de un conjunto
- Palabras en la zona tranquila, con la Tinta automática eligiendo el color

Si el texto va sobre la propia foto, [cómo hacer legible el texto sobre fotos](https://gradiently.design/es/guide/readable-text-on-photos) explica la colocación, y un tinte coherente es uno de los hábitos más sencillos detrás de la [coherencia de marca](https://gradiently.design/es/guide/brand-consistency).

## Un duotono en CSS

En una web puedes construir el mismo efecto con modos de fusión: pasa la foto a escala de grises, multiplícala sobre el color de luz y después aclárala con el color de sombra.

```css
.duotone {
  position: relative;
  background: #fbcfe8; /* highlight colour */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e1b4b; /* shadow colour */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Sombras índigo y luces rubor. Consulta [mix-blend-mode en MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) para el soporte de navegadores.

## FAQ

### ¿Qué es una foto en duotono?

Una foto cuyos colores se sustituyen por dos: uno para las sombras y otro para las luces, con los tonos intermedios fundidos entre ambos.

### ¿Cómo hago una foto en duotono con mis colores de marca?

En Gradiently, selecciona la foto, abre la edición de fotos y elige Duotono; usa los colores del Mark del diseño. En CSS, combina una imagen en escala de grises con modos de fusión.

### ¿Qué diferencia hay entre un duotono y un velo de color?

Un duotono sustituye todo el color de la foto por dos colores. Un velo pone un color sobre la foto conservando parte del suyo, así que los sujetos siguen pareciendo naturales.

### ¿Qué colores hacen un buen duotono?

Un color de sombra muy oscuro y un color de luz muy claro. Dos tonos medios hacen que la foto se vea plana y turbia.

### ¿Puedo recortar fotos en formas en Gradiently?

Sí. Las fotos pueden enmarcarse como cuadrados, círculos, arcos o manchas.