# Diseño a dos tonos: looks atrevidos con solo dos colores

[Canonical HTML page](https://gradiently.design/es/guide/two-tone-design)

Dos colores bien elegidos pueden sostener toda una marca: carteles, cartas, publicaciones y fotos. Aquí tienes cómo elegir la pareja, sacarle más rango y evitar que se vea plana.

## The short version

- El diseño a dos tonos construye cada elemento con dos colores, normalmente uno oscuro y uno claro, sin un tercer color salvo tintes de los dos.
- La pareja necesita una diferencia clara de luminosidad, para que texto y formas se lean sea cual sea el color que quede encima.
- Los tintes y sombras de los dos colores dan a una paleta de dos tonos rango suficiente para fondos, paneles y texto secundario.
- Las fotos en duotono asignan las sombras de una imagen al color oscuro y las luces al claro, lo que permite que la fotografía encaje con una maqueta de dos tonos.
- Las maquetas de dos tonos destacan en feeds saturados porque parecen deliberadas, y se imprimen barato como dos tintas planas.

El **diseño a dos tonos** consiste en construirlo todo, texto, formas, fondos e incluso fotos, con solo dos colores: normalmente uno oscuro y uno claro, con una fuerte diferencia de luminosidad entre ellos. Cobalto y mandarina, bosque y rubor, tinta y mantequilla. El límite es el sentido. Dos colores parecen deliberados, se leen con claridad a cualquier tamaño y dan a una marca una firma reconocible más rápido que una paleta completa.

## Dos tonos, duotono y monocromo no son lo mismo

Las palabras se usan con libertad, así que conviene separarlas. Se solapan, y muchas buenas maquetas usan las tres ideas a la vez.

| Término | Qué significa | Uso típico |
| --- | --- | --- |
| Dos tonos | Un diseño entero hecho con dos colores distintos | Carteles, cartas, packaging, sistemas de marca |
| Duotono | Una foto reasignada a dos colores, las sombras a uno y las luces al otro | Fotografía dentro de una maqueta de dos tonos |
| Monocromo | Solo tintes y sombras de un único tono | Marcas tranquilas de un solo color |
| Degradado de dos colores | Dos colores fundidos suavemente uno en otro | Fondos y secciones hero |

Los dos tonos mantienen los colores separados; un degradado los funde. Ambos pueden convivir en una marca.

Si quieres la mezcla en lugar del corte, [degradados de dos colores](https://gradiently.design/es/guide/two-color-gradients) cubre ese lado, y [esquemas de color monocromáticos](https://gradiently.design/es/guide/monochromatic-color-scheme) cubre la versión de un solo tono.

## Doce paletas de colores de dos tonos

En cada pareja de abajo, un color es lo bastante oscuro para poner texto sobre el otro. El contraste entre tonos importa menos que el contraste de luminosidad: una pareja puede ser cálida y fría, o dos vecinos, mientras uno sea claramente más oscuro.

- Cobalto y mandarina: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Bosque y rubor: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Tinta y mantequilla: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Azul Klein y papel: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Verde carreras y mostaza: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Berenjena y lima: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Rojo cartel y crema: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Verde azulado profundo y melocotón: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Chocolate y cielo: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Sangre de toro y rosa pálido: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Negro y alta visibilidad: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Violeta profundo y lila: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Doce parejas, divididas en diagonal. Cada una puede intercambiar qué color es el fondo, lo que duplica tus maquetas.

Algunas son complementarias, como cobalto y mandarina, que da la máxima energía. Otras son parientes cercanas, como violeta profundo y lila, que se siente más tranquilo y más caro. [Colores complementarios](https://gradiently.design/es/guide/complementary-colors) explica por qué los opuestos vibran al encontrarse.

## Cómo elegir tus dos colores

1. **Elige primero el color oscuro** Llevará cada titular y cada párrafo, así que debe leerse sobre el color claro. Azul marino, bosque, berenjena, chocolate y casi negro funcionan.
2. **Elige el color claro por el ambiente** Es el color que la gente recuerda. Los claros cálidos, como melocotón y mantequilla, resultan cercanos; los fríos, como cielo y lila, más serenos.
3. **Comprueba el contraste en ambos sentidos** El texto oscuro sobre el color claro debería alcanzar 4,5:1 para texto corrido. Todas las parejas de la cuadrícula de arriba superan esa prueba.
4. **Pruébalo en tres formatos** Una publicación cuadrada, una story de 1080×1920 y un folleto A5. Si la pareja sigue pareciendo tuya en los tres, quédatela.

## Cómo sacar más rango de dos colores

Dos colores planos pueden quedarse cortos cuando necesitas un panel secundario, un pie de foto o un botón desactivado. La solución no es un tercer color. Mezcla tintes del color claro y sombras del oscuro, de modo que cada tono nuevo siga perteneciendo a la pareja.

- Cobalto: #172e70
- Cobalto 75: #516294
- Cobalto 40: #a2abc6
- Mandarina 10: #fdf0e6
- Mandarina 55: #ffb780
- Mandarina: #ff7a1a

Una pareja, seis tonos. La mandarina al 10% hace un fondo de papel cálido, y el cobalto al 40% sirve para texto secundario sobre paneles oscuros.

- **Fondo:** el tinte más claro, para zonas grandes y páginas de texto.
- **Principal:** el color oscuro, para titulares, texto corrido y bloques sólidos.
- **Golpe de color:** el color claro a plena fuerza, para una forma, una palabra o un precio.
- **Tonos medios:** un tinte medio de cada uno, para separadores, pies de foto y rellenos de ilustración.

## Fotos a dos tonos con duotono

Las fotos son donde las maquetas de dos tonos suelen romperse: una imagen a todo color mete un tercer, cuarto y quinto color en la página. Un tratamiento duotono reasigna la foto para que sus sombras sean tu color oscuro y sus luces tu color claro. [El efecto duotono](https://gradiently.design/es/guide/duotone-effect) profundiza más; en la web puedes hacerlo con modos de fusión.

```css
.duotone {
  position: relative;
  background-color: #ff7a1a; /* light tone: the highlights */
}

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

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #172e70; /* dark tone: the shadows */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Un duotono cobalto y mandarina. La imagen se vuelve gris, se multiplica sobre el tono claro y después el tono oscuro eleva las sombras a cobalto.

En Gradiently puedes teñir cualquier foto con los colores del Mark como mono, duotono o lavado, para que las imágenes se unan al diseño en lugar de pelearse con él.

## Ideas de diseño a dos tonos para probar

Una publicación vertical dividida en dos bloques de color, con Abierto hasta tarde los viernes en un lado

Una maqueta dividida: un color lleva las palabras, el otro lleva el ambiente.

Una publicación vertical mínima que dice Carta de primavera en un color oscuro sobre fondo claro

Una maqueta mínima donde el color claro es el fondo y el oscuro hace todo el texto.

- **Carteles de conciertos y eventos:** dos tintas planas se imprimen barato y parecen intencionadas desde el otro lado de la calle.
- **Cartas de restaurante:** un color oscuro para los platos, el claro para el papel, un tinte medio para los precios.
- **Carruseles de Instagram:** alterna qué color es el fondo en cada diapositiva, para que deslizar tenga ritmo.
- **Packaging:** un color por línea de producto, el otro compartido en toda la gama.
- **Presentaciones:** diapositivas de sección en el color oscuro, de contenido sobre el tinte claro.
- **Tarjetas de visita:** una cara en cada color.

### Evita

- Dos colores de luminosidad parecida
- Colar un tercer color para un solo botón
- Fotos a todo color puestas sin tratar
- Texto claro sobre el color claro

### Haz

- Uno claramente oscuro, otro claramente claro
- En su lugar, tintes y sombras de la pareja
- Duotono en cada foto con los dos colores
- Comprueba el contraste en ambos sentidos

Para medir el contraste en ambos sentidos, usa las herramientas de [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility). Si te gusta la disciplina de dos colores, el mismo pensamiento recorre el [diseño gráfico minimalista](https://gradiently.design/es/guide/minimalist-design-ideas) y, a todo volumen, el [diseño gráfico atrevido](https://gradiently.design/es/guide/bold-design-ideas).

## FAQ

### ¿Qué es el diseño a dos tonos?

Un diseño construido por completo con dos colores, normalmente uno oscuro y uno claro, con tintes de esos dos permitidos pero sin un tercer color.

### ¿Qué dos colores combinan bien en un diseño?

Cualquier pareja con una clara diferencia de luminosidad, como cobalto y mandarina, bosque y rubor, o tinta y mantequilla. El más oscuro debe leerse sobre el más claro.

### ¿Cuál es la diferencia entre dos tonos y duotono?

Dos tonos describe una maqueta entera hecha con dos colores. Duotono describe una foto reasignada para que sus sombras y luces se conviertan en dos colores.

### ¿Cómo hago una imagen en duotono con CSS?

Pasa la imagen a escala de grises, mézclala con `mix-blend-mode: multiply` sobre el color claro y superpón después el color oscuro con `mix-blend-mode: lighten`.

### ¿Es más barata la impresión a dos colores?

En serigrafía y offset con tintas planas, menos tintas suele significar menos pantallas o planchas, así que los trabajos a dos colores suelen ser más baratos que a todo color.