edubun
Español

Colores complementarios, análogos y triádicos

En la rueda de color de las pantallas, el complemento del azul a 240 grados es el amarillo a 60 grados, mientras que en la rueda de los pintores el naranja queda frente al azul.

Cargando el modelo 3D

Arrastra para girar. Usa la rueda de desplazamiento o separa y junta dos dedos para cambiar el zoom.

Elige una armonía en el menú. Los marcadores adicionales quedan en el mismo disco de luminosidad, en los ángulos de tono correspondientes, unidos por una línea. Mueve el control de Tono y toda la forma gira con él.

Las armonías son ángulos

Los libros de diseño describen unos pocos esquemas de color que suelen verse equilibrados. Una vez que los colores están en un círculo cromático, cada esquema es solo un conjunto de ángulos a partir de un tono inicial. Los colores complementarios están justo opuestos, a 180 grados. Los análogos están uno junto a otro; el modelo usa 30 grados a cada lado. Un esquema triádico usa tres tonos igualmente espaciados, a 120 grados, de modo que forman un triángulo equilátero. Un esquema complementario dividido toma el complemento y lo reemplaza por sus dos vecinos, aquí a 150 y 210 grados del inicio.

Cuatro esquemas en una rueda de 12 tonos que parte del naranja a 30 grados. El rojo está arriba y el tono aumenta en el sentido de las agujas del reloj.

El curso de dibujo de LibreTexts explica el carácter de cada esquema. Los pares complementarios dan un contraste fuerte y llaman la atención, por eso los diseñadores los usan para lo que debe destacar. Los esquemas análogos se ven calmados y unificados y son comunes en la naturaleza, como los verdes, amarillos y naranjas de una pradera. Los esquemas triádicos son vivos pero equilibrados. Los complementarios divididos conservan buena parte del contraste de un par complementario y resultan más fáciles de llevar. La guía de la biblioteca de la Universidad de Delaware agrega una regla práctica sobre cuánto usar de cada color: cerca de 60% para un color dominante, 30% para uno secundario y 10% para un acento.

¿Qué rueda?

Aquí hay una trampa. Hay más de una rueda de color. La rueda HSL de este curso se construye con luz, con rojo, verde y azul como primarios. En ella, el rojo a 0 grados queda frente al cian a 180, el verde frente al magenta y el azul frente al amarillo. Muchas clases de arte usan una rueda de pintor basada en pigmentos rojo, amarillo y azul. En esa rueda, el rojo queda frente al verde, el amarillo frente al morado y el azul frente al naranja, los pares que enumera el curso de LibreTexts. Ninguna de las dos ruedas está equivocada. Responden a preguntas distintas. La rueda de luz te dice qué dos luces suman blanco. La rueda del pintor es una larga tradición para mezclar pintura. Cuando armas una paleta para una pantalla, los ángulos HSL son los que usará tu código, así que fíjate de qué rueda habla un tutorial.

Una armonía fija los tonos, no la luminosidad. Tres tonos triádicos a saturación total y 50% de luminosidad resultan estridentes. En la práctica, los diseñadores conservan los ángulos y cambian la saturación y la luminosidad: un tono fuerte y los otros pálidos u oscuros. Pruébalo en el modelo. Elige una tríada, baja la saturación y observa que el triángulo se encoge hacia el eje de grises sin perder su forma.

En la mayoría de los libros aparecen dos esquemas más. Un esquema monocromático usa un solo tono en varias versiones más claras y más oscuras, que el texto de teoría del color de RMIT llama aclarados (tints) y oscurecidos (shades). En términos HSL, el tono queda fijo y solo se mueven la luminosidad y la saturación, así que en el modelo es una línea vertical sobre la rebanada. Un esquema tetrádico usa cuatro tonos que forman un rectángulo en la rueda, dos pares complementarios juntos; cuando los cuatro están igualmente espaciados, a 90 grados, forman un cuadrado. Cuatro tonos son difíciles de equilibrar, así que la mayoría de las guías sugiere dejar que uno de ellos domine y usar los otros en pequeñas cantidades.

Complementaria+180°
Análoga−30° y +30° (vecinos)
Triádica+120° y +240°
Complementaria dividida+150° y +210°
Complemento del azul en la rueda de luzAmarillo (240° + 180° = 60°)
Ideas clave
  • Complementarios: a 180°. Análogos: vecinos. Triádicos: a 120°. Complementario dividido: 150° y 210°.
  • En la rueda de luz (HSL), el azul queda frente al amarillo; en la rueda del pintor, frente al naranja.
  • Las armonías fijan el tono; la saturación y la luminosidad las eliges tú.
  • Una regla práctica común: 60% dominante, 30% secundario, 10% de acento.
  1. ¿Qué tono es el complemento de 30° en la rueda HSL?
  2. ¿Qué tono es el complemento de 300°?
  3. Un esquema triádico parte de 0°. ¿Qué tonos lo completan?
    • 120° y 240°
    • 90° y 180°
    • 30° y 330°
    • Solo 180°
  4. ¿Qué forma hacen los colores triádicos en la rueda?
    • Triángulo equilátero
    • Línea recta
    • Cuadrado
    • Triángulo rectángulo
  5. ¿Qué par es análogo?
    • 30° y 60°
    • 30° y 210°
    • 0° y 120°
    • 60° y 240°
  6. En la rueda HSL (de luz), ¿qué queda frente al azul?
    • Amarillo
    • Naranja
    • Rojo
    • Verde
  7. En una rueda tradicional de pintor, ¿qué queda frente al azul?
    • Naranja
    • Amarillo
    • Cian
    • Magenta
  8. ¿Qué esquema reemplaza el complemento por sus dos vecinos?
    • Complementaria dividida
    • Análoga
    • Triádica
    • Monocromático
  9. En una paleta 60/30/10, ¿qué porcentaje es el color de acento?
  10. Bajas la saturación de una tríada en el modelo. ¿Qué le pasa al triángulo?
    • Se encoge hacia el eje de grises
    • Gira
    • Se convierte en una línea
    • No cambia nada
Fuentes de este curso (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Fecha de consulta: 2026-10-17