edubun
Italiano
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Home›Colore e design

Teoria del colore

Ogni colore su uno schermo si descrive con tre numeri. In questo corso costruisci in 3D il cubo RGB e il cilindro HSL e osservi la posizione dei colori complementari e triadici sul cerchio delle tonalità. Mescoli luce e inchiostro e calcoli il rapporto di contrasto WCAG, che indica se un testo è leggibile.

Progressi

Informazioni sul corso

Negli anni 1660 Isaac Newton cominciò a far passare la luce del Sole attraverso prismi di vetro in una stanza buia. Dimostrò che la luce bianca è una fascia di colori e che un secondo prisma non poteva scomporli ulteriormente. In Opticks, del 1704, piegò quella fascia in un cerchio, divise il bordo in sette parti secondo le proporzioni di una scala musicale e mise il bianco al centro. È uno dei primi cerchi cromatici: tutti i cerchi delle tonalità di questo corso ne discendono. Ogni colore su uno schermo si descrive con tre numeri; una retina contiene circa 6 milioni di coni di soli tre tipi.

Le sette unità iniziano da come vediamo i colori, poi affrontano RGB e codici esadecimali: 256 livelli ciascuno di rosso, verde e blu danno 16 777 216 colori, ognuno un punto dentro un cubo. Nel 1861, alla Royal Institution, Maxwell mostrò un nastro scozzese fotografato attraverso filtri rossi, verdi e blu: il metodo a tre canali è ancora quello usato da tutte le fotocamere digitali e dagli schermi. L’unità Tonalità, saturazione e luminosità fa notare che giallo e blu hanno entrambi luminosità del 50% in HSL, ma il giallo riflette quasi 13 volte più luce del blu. I colori complementari, analoghi e triadici vengono collocati sul cerchio delle tonalità. L’unità Miscela additiva e sottrattiva comprende Coloritto di Jacob Christoph Le Blon, del 1722 circa, che lo Smithsonian considera la prima testimonianza di entrambe le idee. Il rapporto di contrasto mostra che il grigio #767676 su bianco, a 4.54:1, supera il minimo WCAG per il testo corrente, mentre #777777 a 4.48:1 non lo raggiunge. L'ultima unità ricorda che circa l'8 percento degli uomini ha un deficit della visione rosso-verde. Il laboratorio 3D costruisce il cubo RGB e il cilindro HSL.

Prima di iniziare

Confrontare i colori con i loro numeri aiuta quando due campioni sembrano simili ma si comportano diversamente. Le lezioni introducono RGB e codici esadecimali prima di HSL, relazioni cromatiche e contrasto. Distingui la miscela di luce sullo schermo da quella degli inchiostri: gli stessi nomi non implicano lo stesso risultato.

Alla fine

Saprai leggere valori RGB ed esadecimali, regolare tonalità, saturazione e luminosità e scegliere colori complementari, analoghi o triadici. Potrai distinguere la sintesi additiva della luce da quella sottrattiva degli inchiostri, verificare il contrasto del testo secondo WCAG e spiegare perché il solo colore non basta a segnalare un errore in un modulo.

  1. 1Come vediamo il coloreUna retina contiene circa 6 milioni di coni di soli tre tipi. Ogni colore che hai visto deriva dalla combinazione delle risposte di questi tre tipi di coni, che reagiscono con intensità diverse.
  2. 2RGB e codici esadecimaliCon 256 livelli per il rosso, il verde e il blu, uno schermo può rappresentare 256 × 256 × 256 = 16 777 216 colori, e ognuno è un punto all'interno di un cubo.
  3. 3Tonalità, saturazione e luminositàIn HSL, giallo e blu hanno entrambi una luminosità del 50%, eppure il giallo riflette quasi 13 volte più luce del blu secondo la formula di luminanza WCAG.
  4. 4Colori complementari, analoghi e triadiciSulla ruota dei colori dello schermo, il complementare del blu a 240 gradi è il giallo a 60 gradi, mentre la ruota di un pittore mette l'arancione di fronte al blu.
  5. 5Miscela additiva e sottrattivaL'inchiostro ciano su carta bianca assorbe la luce rossa, quindi ciano e magenta stampati uno sull'altro lasciano solo il blu.
  6. 6Rapporto di contrasto e testo leggibileIl grigio #767676 su bianco ha un rapporto di contrasto di 4.54:1 e supera il minimo WCAG per il testo corrente; un passo più chiaro, #777777, dà 4.48:1 e non lo supera.
  7. 7Usare il colore in un progettoCirca l'8 percento degli uomini ha una deficienza della visione dei colori rosso-verde, quindi un modulo che segnala gli errori solo in rosso lascia molti di loro a tirare a indovinare.

Corsi correlati

  • Leggere le note · Teoria musicale
    Impara a leggere le altezze sul pentagramma: chiave di violino, chiave di basso, tagli addizionali, il doppio pentagramma, diesis e bemolle, e i diversi nomi che i musicisti usano per le stesse note. Ogni unità ha un quiz sul pentagramma o una tastiera da suonare.
  • Primi passi al pianoforte · Suonare uno strumento
    Orientati sulla tastiera, impara i nomi dei tasti bianchi, appoggia la mano destra e suona la tua prima melodia sulla tastiera qui sotto. Puoi usare il mouse, lo schermo touch o i tasti del computer.
  • L'orchestra · Storia della musica e ascolto
    Un'orchestra sinfonica completa può riunire più di 100 strumentisti su un solo palco. Cammina su un palco in 3D e scegli uno strumento per ascoltare una riproduzione sintetizzata del suo suono, anche se approssimativa, e vederne l'estensione su una tastiera. Poi fai prendere forma a un motivo famoso aggiungendo una famiglia di strumenti alla volta. Sette unità trattano la storia, le quattro famiglie di strumenti, il direttore e la partitura, e come ascoltare.
  • Disegno in prospettiva · Disegno
    Ogni disegno in prospettiva equivale a tracciare un'immagine su una lastra di vetro immaginaria tra il tuo occhio e il mondo. Esplora una stanza 3D con un punto di vista e un quadro di vetro, passa tra le viste a uno, due e tre punti di fuga, alza il punto di vista e osserva come si spostano l'orizzonte e i punti di fuga.
Fonti di questo corso (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).

Consultato il: 2026-10-17