La versión corta
- 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.
En esta página
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 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 |
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.
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.
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.
linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)- 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 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 más comunes.
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 y los degradados OKLCH en CSS 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 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 muestran cómo.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
