edubun
Español
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Inicio›Color y diseño

Teoría del color

Cada color de una pantalla se describe con tres números. En este curso construyes el cubo RGB y el cilindro HSL en 3D y ves cómo se ubican los colores complementarios y triádicos en el círculo cromático. Mezclas luz y tinta y calculas la relación de contraste WCAG, que permite saber si un texto es legible.

Progreso

Acerca de este curso

En la década de 1660 Isaac Newton empezó a hacer pasar la luz del sol por prismas de vidrio en una habitación a oscuras. Mostró que la luz blanca es una banda de colores y que un segundo prisma no podía dividir esos colores más. En su Opticks de 1704 curvó la banda hasta formar un círculo, dividió su borde en siete partes con las proporciones de una escala musical y puso el blanco en el centro. Ese dibujo es uno de los primeros círculos cromáticos, y todas las ruedas de tonos de este curso descienden de él. Cada color en una pantalla son tres números, y una retina tiene unos 6 millones de conos de solo tres tipos.

Las siete unidades empiezan con cómo vemos el color, y luego RGB y los códigos hexadecimales: 256 pasos de rojo, de verde y de azul dan 16 777 216 colores, cada uno un punto dentro de un cubo. Maxwell mostró en la Royal Institution en 1861 una cinta de tartán fotografiada con filtros rojo, verde y azul, y el método de tres canales sigue siendo el que usan todas las cámaras digitales y pantallas. La unidad Tono, saturación y luminosidad señala que el amarillo y el azul tienen ambos una luminosidad de 50% en HSL, aunque el amarillo refleja casi 13 veces más luz que el azul. Los colores complementarios, análogos y triádicos se ubican en el círculo cromático. La mezcla aditiva y sustractiva incluye el Coloritto de Jacob Christoph Le Blon, de hacia 1722, que el Smithsonian considera el primer registro de ambas ideas. La razón de contraste muestra que el gris #767676 sobre blanco, con 4.54:1, cumple el mínimo de WCAG para texto de cuerpo, mientras que #777777, con 4.48:1, no lo cumple. La última unidad señala que cerca del 8 por ciento de los hombres tiene deficiencia en la visión del color rojo-verde. El laboratorio 3D construye el cubo RGB y el cilindro HSL.

Antes de empezar

Comparar colores por sus números ayuda cuando dos muestras se parecen pero se comportan de forma distinta. Las lecciones presentan RGB y códigos hexadecimales antes de HSL, relaciones cromáticas y contraste. Fíjate en la diferencia entre mezclar luz de pantalla y tinta, porque los mismos nombres de color no implican el mismo resultado.

Al terminar

Podrás leer valores RGB y hexadecimales, ajustar tono, saturación y luminosidad y elegir colores complementarios, análogos o triádicos. Sabrás distinguir la mezcla aditiva de luz de la sustractiva de tinta, comprobar el contraste del texto según las WCAG y explicar por qué no basta el color para señalar un error en un formulario.

  1. 1Cómo vemos el colorLa retina tiene unos 6 millones de conos de solo tres tipos, y cada color que has visto es una mezcla de cuánto responde cada uno de esos tres tipos.
  2. 2RGB y códigos hexadecimalesCon 256 niveles para el rojo, el verde y el azul, una pantalla puede representar 256 × 256 × 256 = 16 777 216 colores, y cada uno es un punto dentro de un cubo.
  3. 3Tono, saturación y luminosidadEn HSL, el amarillo y el azul tienen ambos una luminosidad de 50%, pero según la fórmula de luminancia de WCAG el amarillo refleja casi 13 veces más luz que el azul.
  4. 4Colores complementarios, análogos y triádicosEn 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.
  5. 5Mezcla aditiva y sustractivaLa tinta cian sobre papel blanco absorbe la luz roja, así que el cian y el magenta impresos uno sobre otro dejan solo azul.
  6. 6Relación de contraste y texto legibleEl gris #767676 sobre blanco tiene una relación de contraste de 4.54:1 y cumple el mínimo de WCAG para el texto de cuerpo; un paso más claro, #777777, da 4.48:1 y no cumple.
  7. 7Usar el color en un diseñoCerca del 8 por ciento de los hombres tiene deficiencia de visión del color rojo-verde, así que un formulario que marca los errores solo en rojo deja a muchos de ellos adivinando.

Cursos relacionados

  • Lectura de notas · Teoría musical
    Aprende a leer las alturas en el pentagrama: clave de sol, clave de fa, líneas adicionales, el sistema de piano, sostenidos y bemoles, y los distintos nombres que usan los músicos para las mismas notas. Cada unidad tiene un cuestionario del pentagrama o un teclado que puedes tocar.
  • Primeros pasos en el piano · Tocar un instrumento
    Oriéntate en el teclado, aprende los nombres de las teclas blancas, coloca la mano derecha y toca tu primera melodía en el teclado de abajo. Funciona con mouse, con pantalla táctil o con las teclas de la computadora.
  • La orquesta · Historia de la música y escucha
    Una orquesta sinfónica completa puede reunir a más de 100 intérpretes en un escenario. Recorre un escenario en 3D, elige cualquier instrumento para oír un sonido sintetizado aproximado y ver su registro en un teclado, y luego arma una melodía famosa familia por familia. Siete unidades recorren la historia, las cuatro familias de instrumentos, el director y la partitura, y cómo escuchar.
  • Dibujo en perspectiva · Dibujo
    Todo dibujo en perspectiva equivale a trazar una imagen sobre una lámina de vidrio imaginaria entre tu ojo y el mundo. Recorre una habitación en 3D con un punto de vista y un plano del cuadro de vidrio, cambia entre vistas de uno, dos y tres puntos de fuga, eleva el punto de vista y observa cómo se mueven el horizonte y los puntos de fuga.
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