# Colores complementarios divididos: contraste sin choque

[Canonical HTML page](https://gradiently.design/es/guide/split-complementary-colors)

Una pareja complementaria es estridente y difícil de equilibrar. Divide el opuesto en dos y conservas casi todo el contraste mientras los colores dejan de pelearse. Así funciona, con paletas para copiar.

## The short version

- Los colores complementarios divididos son un color base más los dos colores que están a cada lado de su complementario en el círculo cromático.
- En un círculo de 360 grados, los dos compañeros están a unos 150 y 210 grados de la base, unos 30 grados a cada lado de su opuesto exacto.
- El esquema mantiene un contraste fuerte pero choca menos que una pareja complementaria directa, porque ningún par de colores es exactamente opuesto.
- Funciona mejor cuando el color base domina y los dos colores divididos se usan como acentos más pequeños.
- Los círculos de los pintores y los de las pantallas sitúan los complementarios de forma distinta, así que la misma base puede dar paletas divididas ligeramente diferentes.

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](https://gradiently.design/es/guide/color-wheel) 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. **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. **Encuentra su complementario** Suma 180 grados. El complementario del verde azulado es un rojo coral a unos 355 grados.
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. **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.

- Base verde azulado: #188b81
- Rosa orquídea: #e052a5
- Albaricoque: #f58a3d
- Verde azulado intenso: #173633
- Papel cálido: #f6f0ea

El ejemplo resuelto: verde azulado con rosa y albaricoque, más un verde azulado más oscuro y un neutro para el texto y el espacio.

## 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](https://gradiently.design/es/guide/complementary-colors) 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.

| Esquema | Colores | Contraste | Facilidad de equilibrio |
| --- | --- | --- | --- |
| Complementario | 2, exactamente opuestos | El más alto | Difícil |
| Complementario dividido | 3, base más dos casi opuestos | Alto | Moderada |
| [Triádico](https://gradiently.design/es/guide/triadic-colors) | 3, a igual distancia de 120 grados | Alto | Moderada a difícil |
| [Análogo](https://gradiently.design/es/guide/analogous-colors) | 3, uno junto a otro | Bajo | Fácil |

El complementario dividido se sitúa entre la calma del análogo y el drama del complementario.

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

| Base | Hex de la base | Compañeros divididos | Se siente |
| --- | --- | --- | --- |
| Verde azulado | `#188b81` | `#e052a5` orquídea, `#f58a3d` albaricoque | Tropical, moderno, animado |
| Violeta | `#6629a3` | `#f5e63d` limón, `#3fa648` hoja | Juguetón, creativo, atrevido |
| Azul cobalto | `#1b4f98` | `#e45e44` bermellón, `#f5d63d` girasol | Seguro, deportivo, clásico |
| Carmesí | `#c32230` | `#318160` jade, `#2970a3` cerúleo | Festivo, arraigado, rico |
| Verde bosque | `#2a6f41` | `#ab5eba` orquídea, `#e4677c` rosa | Botánico, romántico, fresco |

Copia los códigos directamente en tu herramienta. Usa la base para la mayor parte de la superficie.

- Verde azulado: los dos compañeros: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Cobalto: los dos compañeros: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Base verde azulado como fondo: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Base cobalto como fondo: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

Los dos compañeros divididos son vecinos, así que se funden limpiamente entre sí. Fundir la base directamente con un compañero cruza el círculo y se enfanga, así que deja la base como su propio fondo.

## 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](https://gradiently.design/es/guide/60-30-10-rule) 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.

Publicación vertical de carta de verano sobre un fondo verde azulado intenso con acentos rosa y albaricoque

Un fondo verde azulado intenso hace casi todo el trabajo; el rosa y el albaricoque se reservan para las palabras y un detalle destacado.

### Evita

- Los tres tonos a plena saturación y con la misma superficie
- Texto de cuerpo en el color de un compañero sobre el del otro
- Un único degradado que va de la base a un compañero cruzando el círculo
- Añadir un cuarto tono vivo encima

### Haz

- Una base dominante, a menudo oscurecida o apagada
- Compañeros con distinta luminosidad, para que uno lidere
- Un neutro para el texto y para respirar
- Comprueba el contraste donde haya palabras

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

```css
: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%);
}
```

Cambia `--h` y todo el esquema complementario dividido se mueve con él. Más sobre este modelo en [tono, saturación y brillo](https://gradiently.design/es/guide/hue-saturation-brightness).

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.

## FAQ

### ¿Qué son los colores complementarios divididos?

Un color base más los dos colores a cada lado de su complementario en el círculo cromático. Para el azul, son el rojo anaranjado y el amarillo anaranjado.

### ¿Cómo se encuentran los colores complementarios divididos?

Encuentra el complementario del color base sumando 180 grados a su tono, y luego toma los tonos a unos 30 grados a cada lado.

### ¿El complementario dividido es mejor que el complementario?

Es más fácil de equilibrar. Conservas la mayor parte del contraste, pero los colores chocan menos porque ninguno es exactamente opuesto.

### ¿Cuál es el complementario dividido del rojo?

En el círculo del pintor, el verde amarillento y el verde azulado. En un círculo HSL de pantalla, los compañeros del rojo son un cian verdoso y un cian azulado, hacia los 150 y 210 grados.

### ¿Cuántos colores tiene un esquema complementario dividido?

Tres tonos, aunque la mayoría de las paletas reales añaden un neutro oscuro y uno claro para el texto y el espacio.