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

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.

Si quieres la mezcla en lugar del corte, degradados de dos colores cubre ese lado, y esquemas de color monocromáticos 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.

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 explica por qué los opuestos vibran al encontrarse.

Cómo elegir tus dos colores

1. 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. 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. 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. 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.

• 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 profundiza más; en la web puedes hacerlo con modos de fusión.

.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;
}

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

• 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.

Para medir el contraste en ambos sentidos, usa las herramientas de contraste de color y accesibilidad. Si te gusta la disciplina de dos colores, el mismo pensamiento recorre el diseño gráfico minimalista y, a todo volumen, el diseño gráfico atrevido.