Rueda de color

La rueda de color (también llamada círculo cromático) es una representación circular de los colores organizados según su relación en el espectro visible. Inventada por Isaac Newton en 1666 y refinada por Johannes Itten en el siglo XX, es la herramienta fundamental de la teoría del color para identificar combinaciones armónicas sin depender del ojo entrenado.

¿Cómo está organizada la rueda?

En la rueda clásica de 12 segmentos (modelo RYB de pigmentos):

        Amarillo
    Amarillo-Verde    Amarillo-Naranja
  Verde                        Naranja
    Azul-Verde         Rojo-Naranja
        Azul   Azul-Violeta  Rojo
                Violeta  Rojo-Violeta

En diseño digital se usa el modelo HSL/RGB, donde la rueda recorre los 360° del eje Hue:

Relaciones entre colores que define la rueda

Complementarios (180°)

Los matices opuestos. Generan el mayor contraste posible y se potencian mutuamente: un pequeño toque de naranja sobre azul destaca de inmediato. Úsalos para colores de acento sobre el color base.

Ejemplos: azul hsl(220, 80%, 50%) + naranja hsl(40, 80%, 50%).

Puedes leer más sobre cómo combinarlos en el artículo de colores complementarios.

Análogos (30°-60° de diferencia)

Colores adyacentes en la rueda. Producen paletas suaves, naturales y cohesivas; son las paletas preferidas en diseño de interiores y moda.

Ejemplo: azul (240°), azul-violeta (255°) y violeta (270°).

Triádicos (120° entre sí)

Tres colores equidistantes. Ofrecen variedad y contraste moderado. Para que funcionen bien, uno debe ser dominante y los otros dos actuar como acento y soporte.

Ejemplo: rojo (0°), amarillo (60°→ no exactamente triádico en HSL digital, ajustar a 120° = verde) y azul (240°).

Divididos complementarios

En lugar del complementario exacto, se usan sus dos vecinos (±30°). Menos tensión visual que el complementario puro, pero más variedad que el análogo.

Ejemplo base azul (240°): en lugar de naranja (60°), se usan amarillo-naranja (30°) y rojo-naranja (15°≈ 0° rojo).

Tetrádicos / cuadrados (90° entre sí)

Cuatro colores a 90° de distancia. La paleta más compleja; requiere que al menos dos colores actúen como neutros para no saturar el diseño.

La rueda en CSS con HSL

Con el modelo HSL puedes calcular relaciones de forma matemática:

:root {
  --hue-base: 220;                        /* azul */
  --complementario: calc(var(--hue-base) + 180); /* 400° = 40°, naranja */
  --analogo-1: calc(var(--hue-base) - 30); /* 190°, cian-azul */
  --analogo-2: calc(var(--hue-base) + 30); /* 250°, azul-violeta */
}

CSS no evalúa calc() dentro de hsl() directamente en todos los navegadores; lo habitual es declarar los valores calculados como variables y usarlos en la función hsl().

La rueda de color y la accesibilidad

La rueda define armonía de matiz, pero no garantiza contraste de luminancia. Dos colores complementarios perfectamente opuestos en la rueda (como amarillo y violeta oscuro) pueden tener un ratio de contraste de 10:1 o de 1,2:1 dependiendo de su luminosidad. Siempre combina la elección cromática con la verificación de contraste WCAG y define la paleta de colores con ambos criterios en mente.

Herramientas basadas en la rueda

Las principales herramientas de diseño (Adobe Color, Figma, Coolors) incorporan la rueda interactiva para explorar relaciones entre matices y exportar directamente en HEX, RGB o HSL. En todas ellas el principio subyacente es el mismo: la posición angular en la rueda determina la relación armónica, y la escala de saturación/luminosidad determina el contraste.