Colores complementarios divididos: contraste sin choque

Los colores complementarios divididos son tres colores: una base, más los dos colores a cada lado del complementario de la base. En lugar de emparejar el azul con su opuesto directo, el naranja, emparejas el azul con el rojo anaranjado y el amarillo anaranjado. Conservas el contraste de cálido contra frío que da vida a los esquemas complementarios, pero como nada está exactamente opuesto a nada, el resultado es más agradable a la vista y mucho más fácil de equilibrar en un diseño real.

Cómo funcionan los colores complementarios divididos

Imagina el círculo cromático como un reloj. Tu color base está en las doce. Su complementario está en las seis. Un esquema complementario dividido se salta las seis y toma las cinco y las siete. En grados, son tonos a unos 150 y 210 grados de la base.

1. 1

   Elige un tono base

   Empieza con el color del que trata de verdad tu diseño: el color de marca, el producto, el ambiente. Por ejemplo, verde azulado, con un tono de 175 grados.

2. 2

   Encuentra su complementario

   Suma 180 grados. El complementario del verde azulado es un rojo coral a unos 355 grados.

3. 3

   Avanza 30 grados a cada lado

   Ve 30 grados en cada dirección desde el complementario: unos 325 grados (rosa) y 25 grados (naranja).

4. 4

   Ajusta luminosidad y saturación

   Los tonos fijan el esquema, pero tú decides cuán claro, intenso o apagado es cada uno. Ahí es donde la paleta empieza a parecer tuya.

Por qué el complementario dividido choca menos

Los opuestos exactos, como el rojo y el cian o el azul y el naranja, compiten por la atención con la misma fuerza. Colocados lado a lado a plena saturación pueden parecer vibrar, y mezclados se vuelven grises. Los colores complementarios son potentes por eso, pero dejan poco margen de error.

En un esquema dividido, los dos compañeros están a 60 grados entre sí, lo que los hace parientes cercanos. Se apoyan en lugar de pelearse, y juntos equilibran la base. Obtienes contraste con un aliado natural en el lado cálido, o en el frío, según desde dónde empieces.

Ejemplos de paletas complementarias divididas

Cinco paletas construidas con los pasos anteriores. El primer color de cada fila es la base; los otros dos son sus compañeros divididos. La luminosidad y la saturación se han ajustado para que cada conjunto sirva para trabajo real, no solo para ser teóricamente correcto.

Cómo usar un esquema complementario dividido en un diseño

Tres colores igual de estridentes hacen que un diseño parezca una bandera. Dales mejor tareas desiguales. La regla 60 30 10 es un buen punto de partida: la base cubre la mayor parte de la superficie, un compañero hace de apoyo y el otro aparece solo donde quieres que la mirada vaya primero.

Apagar es tu otra palanca. Oscurece o agrisa la base hasta que se comporte casi como un neutro, y los dos compañeros de pronto parecerán intencionados en lugar de estridentes. Así es como los esquemas divididos acaban sintiéndose sofisticados: un verde azulado intenso, un rosa empolvado y un albaricoque suave usan los mismos tonos que la versión viva, pero se leen como un hotel boutique y no como una pelota de playa.

Círculo de pintor o círculo de pantalla

Hay dos círculos cromáticos comunes. El círculo tradicional de los pintores usa rojo, amarillo y azul como primarios, así que el opuesto del rojo es el verde. Las pantallas usan luz roja, verde y azul, así que en un círculo HSL el opuesto del rojo es el cian. Ambos dan esquemas válidos; solo usa un mismo círculo de forma coherente. Si trabajas en CSS, el círculo de pantalla es el que usa hsl(), así que puedes generar un esquema con un poco de aritmética.

:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}

Para ver una paleta funcionando en formatos reales, el Designer de Gradiently puede maquetar una publicación, una story y un banner de una vez, para que juzgues las proporciones en cada tamaño y no en una carta de muestras.