Teoría del color y círculo cromático: guía práctica
La teoría del color es el conjunto de principios que explica cómo se relacionan los colores, cómo se mezclan y cómo los percibimos cuando están juntos. Su punto de partida es el círculo cromático: un diagrama que ordena los tonos alrededor de un círculo, con los colores primarios, los secundarios (la mezcla de dos primarios) y los terciarios (un primario mezclado con un secundario vecino). Con él entiendes por qué algunas combinaciones funcionan, cómo aclarar u oscurecer un color sin que pierda su carácter y por qué el mismo color se ve distinto según el fondo.
Hay un detalle que confunde a mucha gente: no existe un solo círculo cromático. El que seguramente aprendiste en la escuela, con rojo, amarillo y azul como primarios (RYB), es el de la pintura. Las pantallas usan el círculo RGB, basado en rojo, verde y azul. Esta guía explica los dos, los tres atributos de un color (tono, saturación y luminosidad), los colores cálidos y fríos, los tintes, sombras y tonos, y el fenómeno del contraste simultáneo, con ejemplos en códigos de color que puedes usar de inmediato.
Breve historia de la teoría del color
La teoría del color moderna empieza con Isaac Newton. En Opticks (1704) describió cómo un prisma descompone la luz blanca y dispuso los colores del espectro en un círculo, uniendo el rojo con el violeta. Fue la primera vez que alguien trató el color como un sistema continuo y circular.
En 1810, Goethe publicó Zur Farbenlehre (Teoría de los colores), más interesado en la experiencia humana del color que en la física. Sus conclusiones científicas no resistieron, pero la idea de que la percepción importa tanto como la luz influyó en generaciones de artistas.
En 1839, el químico francés Michel-Eugène Chevreul, responsable de los tintes en la manufactura de tapices Gobelinos, publicó su estudio sobre la ley del contraste simultáneo de los colores. Se dio cuenta de que las quejas por hilos "apagados" no eran un problema de tinte, sino de percepción: el color vecino cambiaba el color que se veía. Volveremos a este tema más adelante.
En el siglo XX, Johannes Itten, profesor de la Bauhaus, sistematizó un círculo RYB de 12 partes y describió siete tipos de contraste (de tono, claro-oscuro, cálido-frío, complementario, simultáneo, de saturación y de cantidad) en El arte del color (1961). Hoy es una referencia histórica y didáctica, no una ley científica. En la misma línea llegaron Josef Albers, con La interacción del color (1963), y, en el terreno de la medición, Albert Munsell, que a principios del siglo XX ordenó los colores por tono, valor y croma, una idea que anticipa los espacios de color perceptuales que usamos hoy.
Círculo RYB (arte) vs círculo RGB (pantallas)
El círculo cromático cambia según el medio, porque cada medio produce el color de forma diferente:
- RYB (rojo, amarillo, azul) es el modelo tradicional de la pintura. Es intuitivo para mezclar pigmentos sobre papel, pero no es preciso desde el punto de vista colorimétrico: con rojo, amarillo y azul no consigues un magenta ni un cian intensos.
- RGB (rojo, verde, azul) es el modelo aditivo de la luz. Monitores y móviles suman luz roja, verde y azul; las tres al máximo dan blanco.
- CMY(K) (cian, magenta, amarillo, más el negro) es el modelo sustractivo de la impresión. Cada tinta absorbe parte de la luz; los secundarios del CMY son los primarios del RGB, y viceversa.
| Característica | RYB (tradicional) | RGB (pantallas) | CMY (impresión) |
|---|---|---|---|
| Tipo de mezcla | Pigmentos (empírica) | Aditiva (luz) | Sustractiva (tinta) |
| Primarios | Rojo, amarillo, azul | Rojo, verde, azul | Cian, magenta, amarillo |
| Secundarios | Naranja, verde, violeta | Cian, magenta, amarillo | Rojo, verde, azul |
| Complementario del rojo | Verde | Cian | Cian |
| Todos mezclados | Marrón oscuro o grisáceo | Blanco | Casi negro (por eso existe la K) |
| Dónde usarlo | Pintura, enseñanza artística | Web, apps, video | Imprenta, envases |
En la práctica: si diseñas para pantallas, piensa en el círculo RGB, que es el mismo que usa el selector de tono del HSL. Si tu trabajo va a imprimirse, lee la guía RGB vs CMYK para saber qué cambia en el camino hacia la imprenta.
Colores primarios, secundarios y terciarios
En el círculo RGB
Los primarios son rojo #FF0000, verde #00FF00 y azul #0000FF. Al sumar dos de ellos a máxima intensidad obtienes los secundarios:
- Rojo + verde = amarillo
#FFFF00 - Verde + azul = cian
#00FFFF - Azul + rojo = magenta
#FF00FF
Los terciarios quedan a medio camino entre un primario y un secundario: naranja #FF8000, verde chartreuse #80FF00, verde primavera #00FF80, azul celeste intenso #0080FF, violeta #8000FF y rosa fucsia #FF0080. Juntos, primarios, secundarios y terciarios forman un círculo de 12 colores separados cada 30°.
En el círculo RYB
En el modelo artístico, los primarios son rojo, amarillo y azul; los secundarios, naranja (rojo + amarillo), verde (amarillo + azul) y violeta (azul + rojo). Los seis terciarios reciben nombres compuestos: rojo anaranjado, amarillo anaranjado, amarillo verdoso, azul verdoso, azul violáceo y rojo violáceo. Es el círculo de 12 partes que popularizó Itten. No hay códigos HEX "oficiales" para el RYB, porque describe cómo se mezclan los pigmentos y no valores de luz.
¿Quieres ver cómo se combinan dos colores? El mezclador de colores muestra los pasos intermedios entre dos códigos.
Tono, saturación y luminosidad
Cualquier color se puede describir con tres atributos, que son justo los del formato HSL de CSS:
- Tono o matiz (hue): la "familia" del color, medida en grados alrededor del círculo. En HSL, 0° es rojo, 60° es amarillo, 120° es verde, 180° es cian, 240° es azul y 300° es magenta; 360° vuelve al rojo.
- Saturación: la pureza o intensidad. Al 100% el color es vivo; al 0% se convierte en gris.
- Luminosidad (lightness): cuánto se acerca el color al blanco o al negro. En HSL, 0% es siempre negro, 100% es siempre blanco y 50% es el color "puro".
Ejemplo: #FF5733 es rgb(255 87 51) y hsl(11 100% 60%): un tono de 11° (rojo que tira a naranja), saturación máxima y luminosidad un poco por encima de la mitad. Si quieres ver la conversión paso a paso, consulta la guía de códigos de color HEX, RGB y HSL.
Ojo: la luminosidad del HSL no es perceptual. hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (azul) tienen la misma luminosidad del 50%, pero el amarillo se ve mucho más claro. La luminancia relativa de WCAG lo confirma: cerca de 0,93 para el amarillo frente a 0,07 para el azul. Sobre fondo blanco, un texto amarillo tiene un contraste de solo 1,07:1; el azul llega a 8,59:1. Por eso los espacios perceptuales como OKLCH, que explicamos en colores en CSS moderno, son mejores para crear escalas equilibradas.
Colores cálidos y colores fríos
Si divides el círculo por la mitad, obtienes dos grupos. Los colores cálidos van del rojo al amarillo, pasando por el naranja: rojo, coral, naranja, dorado. Los colores fríos van del verde al violeta, pasando por los azules: turquesa, azul real, azul marino.
En una composición, los cálidos tienden a "avanzar" y llamar la atención, mientras que los fríos tienden a "retroceder" y calmar el conjunto. Por eso un botón naranja resalta sobre un fondo gris azulado. Las asociaciones emocionales (calidez, energía, calma, confianza) existen, pero son culturales y dependen del contexto; la guía de psicología del color las trata con más cuidado.
Recuerda también que la temperatura es relativa. El amarillo verdoso se ve cálido junto a un azul y frío junto a un naranja. Un gris con matiz azul, como el gris marengo #36454F, se percibe frío; un beige, cálido. Hasta los neutros tienen temperatura.
Tintes, sombras y tonos: variaciones de un color
Para crear variaciones de un color sin cambiar su matiz, los diseñadores usan tres operaciones clásicas. En herramientas en inglés las verás como tints, shades y tones:
- Tinte (tint): mezclar el color con blanco para aclararlo.
- Sombra (shade): mezclar el color con negro para oscurecerlo.
- Tono (tone): mezclar el color con gris para apagarlo.
Estas son las tres operaciones aplicadas a #FF5733, con mezclas del 25%, 50% y 75% calculadas en sRGB:
| Operación | 25% | 50% | 75% |
|---|---|---|---|
| Tinte (+ blanco) | #FF8166 | #FFAB99 | #FFD5CC |
| Sombra (+ negro) | #BF4126 | #802C1A | #40160D |
Tono (+ gris #808080) | #DF6146 | #C06C5A | #A0766D |
En una interfaz, los tintes sirven para fondos suaves y estados destacados, las sombras para texto y estados de hover o pulsado, y los tonos para versiones más sobrias de un color de marca. En CSS moderno, la función color-mix() lo hace directamente:
.alerta { background: color-mix(in srgb, #FF5733 25%, white); }
.alerta:hover { background: color-mix(in srgb, #FF5733 75%, black); }La primera regla conserva el 25% del color original y un 75% de blanco, lo que da #FFD5CC. El mezclador del sitio genera estas escalas sin escribir código.
Contraste simultáneo: el color depende de su vecino
Lo que Chevreul observó en los tapices vale para cualquier pantalla: el ojo no evalúa un color de forma aislada, sino en relación con lo que lo rodea. Los efectos principales son:
- Claro y oscuro: el mismo gris
#808080se ve más claro sobre negro y más oscuro sobre blanco. - Tono: un color tiende a desplazarse hacia el complementario del fondo. Un gris sobre fondo rojo parece ligeramente verdoso o azulado.
- Saturación: junto a un gris, un color parece más vivo; junto a una versión más saturada de sí mismo, parece apagado.
Esto tiene consecuencias muy prácticas. El color de tu marca se verá distinto en una cabecera oscura y en una tarjeta blanca, así que revisa ambos casos antes de aprobarlo. Los iconos y los textos finos son los más afectados, porque el área de color es pequeña. Y como la percepción engaña, confirma la legibilidad con números: el comprobador de contraste calcula la relación de WCAG, que no depende de lo que tu ojo crea en ese momento.
Cómo aplicar la teoría del color en el día a día
- Elige el tono base. Parte del color de la marca, de una foto de referencia o de un producto. Para sacar el código exacto de una imagen, usa el cuentagotas online.
- Define la relación entre los tonos. Los colores vecinos en el círculo transmiten calma; los opuestos crean tensión y contraste. La guía de armonía de colores detalla los seis esquemas clásicos.
- Crea la escala de cada color con tintes y sombras, en lugar de inventar tonos sueltos. Una escala de 5 a 9 pasos cubre fondos, bordes, texto y estados.
- Equilibra temperatura y saturación. Un color cálido y saturado funciona como acento; deja las áreas grandes para neutros o colores menos saturados.
- Prueba en el contexto real, sobre los fondos donde aparecerá el color, sin olvidar el contraste simultáneo.
Resumen y próximos pasos
- El círculo RYB es el de la pintura; el RGB es el de las pantallas y el que usa el HSL; el CMY es el de la impresión.
- Los primarios generan secundarios, y los primarios mezclados con los secundarios vecinos generan terciarios: 12 colores, uno cada 30°.
- Tono, saturación y luminosidad describen cualquier color, pero la luminosidad del HSL no coincide con la claridad percibida.
- Cálido y frío son categorías relativas; tintes, sombras y tonos crean variaciones coherentes de un mismo matiz.
- El color vecino cambia el color que ves, así que valida siempre en contexto y con mediciones.
Para ponerlo en práctica, arma una combinación con el generador de paletas de colores, crea escalas en el mezclador de colores y captura colores de tus referencias con el selector de color en imagen. Después, sigue con la guía de armonía de colores o explora colores concretos como el terracota, el verde azulado y el azul real en el catálogo de colores.