# Colores complementarios: contraste que sigue sintiéndose equilibrado

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

Los colores opuestos dan el contraste más fuerte que puede ofrecer el color, y el camino más rápido a un diseño que vibra o a uno que grita. La diferencia está en la proporción y la luminosidad.

## The short version

- Los colores complementarios son pares que están justo opuestos en la rueda de color, como el azul y el naranja.
- Colocados uno junto al otro a plena intensidad y con luminosidad parecida, los colores complementarios parecen vibrar en el borde que comparten.
- La forma más fiable de usar complementarios es dejar que uno domine y usar el otro como un acento pequeño.
- Cambiar la luminosidad o la saturación de uno de los colores del par mantiene el contraste y elimina el choque.
- Un degradado directo entre dos complementarios tiende a volverse gris en el medio, algo que arregla un color intermedio o la interpolación en OKLCH.

Los **colores complementarios** son dos tonos que están justo opuestos en la rueda de color, como azul y naranja, rojo y verde, o amarillo y violeta. Cada uno hace que el otro se vea más intenso, y por eso los pares complementarios dan el contraste de color más fuerte que existe. Usado con cuidado, ese contraste hace que un elemento sea imposible de no ver. Usado a partes iguales y a plena intensidad, hace que un diseño resulte incómodo de mirar.

Qué pares cuentan como complementarios depende de la rueda. La rueda del pintor empareja el azul con el naranja; la de pantalla empareja el azul con el amarillo. La guía de la [rueda de color](https://gradiently.design/es/guide/color-wheel) explica la diferencia. Los pares de abajo son los que más usan los diseñadores.

## Pares de colores complementarios, con códigos

| Par | Color A | Color B | Transmite |
| --- | --- | --- | --- |
| Azul y naranja | `#1d4ed8` | `#f97316` | Enérgico, deportivo, claro |
| Marino y oro | `#1e3a8a` | `#d4a017` | Clásico, consolidado |
| Rojo y verde | `#b91c1c` | `#15803d` | Festivo, natural, ruidoso |
| Violeta y amarillo | `#6d28d9` | `#facc15` | Juguetón, eléctrico |
| Verde azulado y coral | `#0f766e` | `#fb7185` | Fresco, cálido, moderno |
| Ciruela y salvia | `#581c87` | `#a3b18a` | Apagado, editorial |

Seis pares opuestos. Los tres últimos cambian la luminosidad y la saturación, y por eso se sienten más suaves.

- Azul: #1d4ed8
- Naranja: #f97316
- Verde azulado: #0f766e
- Coral: #fb7185
- Ciruela: #581c87
- Salvia: #a3b18a

Tres de los pares como muestras, cada color junto a su opuesto.

## Por qué vibran los colores complementarios

Pon dos complementarios de luminosidad parecida y saturación plena uno junto a otro y el borde entre ellos parece parpadear. Los ojos no logran decidir dónde acaba uno. El efecto es más fuerte con rojo y verde o azul y naranja a igual intensidad, y hace que el texto de un color sobre el otro sea muy difícil de leer.

- Igual fuerza: vibra: `repeating-linear-gradient(90deg, #e0282e 0px, #e0282e 24px, #1f9d55 24px, #1f9d55 48px)`
- Rojo oscuro, verde pálido: calma: `repeating-linear-gradient(90deg, #7f1d1d 0px, #7f1d1d 24px, #bbf7d0 24px, #bbf7d0 48px)`

Los mismos dos tonos. Separarlos en luminosidad detiene el parpadeo y hace útil el contraste.

La solución casi nunca es cambiar los tonos. Haz que uno de ellos sea mucho más oscuro o más claro, o mucho menos saturado. El par sigue siendo complementario, pero el borde deja de pelear. Esto también resuelve la legibilidad, porque el texto necesita más contraste de luminosidad que de tono; mira el [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility).

## Cómo usar colores complementarios: uno lidera, otro acentúa

El enfoque más fiable es dar a un color casi todo el espacio y al otro una tarea pequeña e importante: un botón, un precio, una sola palabra, una pegatina. El acento atrae la mirada porque es lo único de su clase. La mitad y mitad, en cambio, divide la atención y pocas veces parece planeada.

Fondo marino, acento naranja: `linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)`

Aproximadamente un 90% de marino y un 10% de naranja. La pequeña zona de naranja pesa mucho más que su tamaño.

- **Color dominante:** fondos, formas grandes, la mayor parte de la superficie. Normalmente el más oscuro o discreto del par.
- **Color de acento:** llamadas a la acción, resaltes, una cifra clave. Normalmente el más brillante.
- **Neutros:** casi blanco, casi negro o un gris cálido para dar espacio a ambos. Pocos diseños complementarios buenos tienen solo dos colores.
- **Guía de proporción:** la [regla 60-30-10](https://gradiently.design/es/guide/60-30-10-rule) es un buen punto de partida, con el complementario como el 10.

## Degradados complementarios sin el medio gris

Mezcla dos complementarios directamente y el punto medio se vuelve gris o marrón. En el espacio de color sRGB que usan la mayoría de las herramientas, los valores de rojo, verde y azul de dos opuestos se promedian en algo cercano al neutro. Es uno de los [errores de degradado](https://gradiently.design/es/guide/gradient-design-mistakes) más comunes.

- Directo: gris en el medio: `linear-gradient(90deg, #1d4ed8 0%, #f97316 100%)`
- Vía magenta: sigue vivo: `linear-gradient(90deg, #1d4ed8 0%, #c026d3 50%, #f97316 100%)`
- OKLCH: recorre la rueda: `linear-gradient(in oklch 90deg, #1d4ed8 0%, #f97316 100%)`
- Mezcla corta: menos gris a la vista: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 30%, #f97316 70%, #f97316 100%)`

Cuatro formas de unir azul y naranja. Solo la primera deja ver la zona muerta en medio del campo.

Las dos soluciones más eficaces son un punto intermedio en un tono entre el par y la interpolación en OKLCH, que se mueve por la rueda de color en lugar de cortar a través. Los [degradados turbios](https://gradiently.design/es/guide/muddy-gradients) y los [degradados OKLCH en CSS](https://gradiently.design/es/guide/css-gradient-oklch) explican ambas en detalle.

## Dónde funcionan mejor las paletas complementarias

Los complementarios encajan en trabajos que deben notarse rápido y leerse a distancia. Encajan peor en lecturas largas, interiores tranquilos o cualquier cosa que deba sentirse serena, donde los [colores análogos](https://gradiently.design/es/guide/analogous-colors) rinden mejor.

- **Llamadas a la acción.** Un botón cálido en una página fría, o al revés, es el uso clásico. Se encuentra sin buscar.
- **Deporte y eventos.** Las equipaciones, los carteles y las entradas usan colores opuestos porque se leen desde el otro lado de un estadio o de una calle.
- **Comida y comercio.** El estilismo de comida suele poner platos cálidos sobre vajillas o fondos fríos para que resalten; una pegatina de rebajas en el complementario del envase destaca en un estante.
- **Datos y mapas.** Dos tonos opuestos muestran con claridad los dos lados de una comparación, siempre que las etiquetas los respalden para quienes ven el color de otra manera.
- **Retratos y fotos de producto.** Un fondo en el complementario del color principal del sujeto lo separa sin un contorno duro.

## Errores con colores complementarios que evitar

### Evita

- Cantidades iguales de ambos colores
- Texto de un complementario sobre un fondo del otro
- Ambos colores a plena saturación y con luminosidad parecida
- Un degradado directo entre el par

### Haz

- Un color dominante y un acento pequeño
- Texto en un neutro casi blanco o casi negro
- Un color más profundo, pálido o discreto que el otro
- Un color intermedio o una mezcla en OKLCH

Si un par complementario resulta demasiado tenso incluso equilibrado, prueba la complementaria dividida: un tono más los dos que hay a cada lado de su opuesto. Mantiene la energía y suaviza el choque. Las [paletas triádicas y complementarias divididas](https://gradiently.design/es/guide/triadic-colors) muestran cómo.

## FAQ

### ¿Qué son los colores complementarios?

Los colores complementarios son dos tonos opuestos en la rueda de color, como azul y naranja o rojo y verde. Juntos crean el contraste de color más fuerte.

### ¿Cuál es el color complementario del azul?

En la rueda tradicional del pintor es el naranja. En la rueda RGB de pantalla que usan las herramientas digitales es el amarillo.

### ¿Por qué parece que los colores complementarios vibran?

Cuando dos opuestos de luminosidad parecida y saturación plena se tocan, al ojo le cuesta decidir dónde está el borde. Hacer un color más oscuro, más claro o menos saturado lo detiene.

### ¿Cómo hago un degradado entre colores complementarios?

Añade un punto intermedio en un tono entre los dos o interpola en OKLCH. Una mezcla directa en sRGB entre complementarios suele volverse gris en el medio.

### ¿Cuánto debo usar de cada color complementario?

Deja que uno domine y usa el otro como un acento pequeño, por ejemplo cerca de un 90% frente a un 10%, con neutros para dar espacio a ambos.