Colores complementarios

Los colores complementarios son los pares de colores situados exactamente en lados opuestos de la rueda de color, a 180° de distancia. Son la combinación de mayor contraste de matiz posible: al colocarlos juntos, cada color intensifica la percepción del otro y ambos parecen más vívidos que por separado.

Pares complementarios principales

En el modelo RGB digital (HSL)

En CSS, el complementario de cualquier color HSL se obtiene sumando (o restando) 180° al valor del matiz:

/* Color primario */
--color-primario: hsl(220, 80%, 50%);   /* azul */
/* Complementario: 220 + 180 = 400 → 40° (naranja) */
--color-acento: hsl(40, 80%, 50%);

En el modelo RYB clásico (pigmentos)

El modelo tradicional de pintura usa primarios distintos, lo que desplaza ligeramente los complementarios respecto al modelo digital:

• Rojo ↔ Verde
• Azul ↔ Naranja
• Amarillo ↔ Violeta

Esta discrepancia es la razón por la que en pintura el complementario del azul es el naranja, mientras que en pantalla digital el complementario del azul puro (#0000FF, hsl 240°) es el amarillo-naranja (hsl(60°), que en el modelo RGB es amarillo).

Cómo usar complementarios en diseño web

Esquema complementario básico

Un color primario + su complementario como acento. Es la estructura de paleta más sencilla y con mayor impacto visual. Regla práctica: usa el color base en el 80-90 % de la interfaz y reserva el complementario para los elementos de mayor prioridad (botones CTA, badges, indicadores de estado).

Ejemplo concreto: marca en azul (#1D4ED8) con acento en naranja-ámbar (#D97706). Es la combinación de muchos logotipos deportivos y de moda porque comunica energía y estabilidad al mismo tiempo.

Contraste complementario: precaución con el vibrado

Cuando dos complementarios muy saturados se tocan directamente en bordes finos, producen un efecto de vibrado óptico que resulta incómodo. La solución es:

1. Separar ambos colores con un espacio en blanco, gris o negro.
2. Desaturar uno de los dos (o ambos).
3. Usar uno como fondo de baja saturación y el otro como acento puro.

Esquema complementario dividido

Para suavizar la tensión del complementario puro, usa sus dos vecinos (±30°) en lugar del opuesto exacto. Esto permite más riqueza de tonos manteniendo el contraste:

• Base: azul (220°)
• En lugar de naranja (40°): amarillo-naranja (15°) + rojo-naranja (5°)

Complementarios y accesibilidad

El contraste de matiz que ofrecen los complementarios no equivale al contraste de luminancia que exige WCAG. Dos complementarios perfectamente opuestos pueden ser ilegibles uno sobre el otro si tienen luminosidades similares. Ejemplo clásico: rojo y verde al 50 % de luminosidad tienen un ratio de contraste de apenas 1,3:1, muy por debajo del mínimo de 4,5:1 que exige la norma.

Siempre combina la elección de colores complementarios con la verificación de contraste WCAG. En la práctica, si quieres texto legible sobre un fondo de color, uno de los dos debe ser muy oscuro o muy claro.

Complementarios en la paleta web: resumen práctico

1. Identifica tu color de marca principal en HSL.
2. Suma 180° al matiz para obtener el complementario teórico.
3. Ajusta la saturación y luminosidad del complementario para que contraste con el fondo (verifica el ratio WCAG).
4. Úsalo únicamente en elementos de alta prioridad: el complementario pierde fuerza si lo aplicas a demasiados elementos.
5. Construye el resto de la paleta de colores con análogos desaturados o neutros, no con más complementarios.