RGB e codici esadecimali

Con 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.

Caricamento del modello 3D

Trascina per ruotare. Scorri oppure avvicina e allontana due dita per regolare lo zoom.

Trascina per girare il solido. Clicca un cubetto nella vista RGB, oppure il disco colorato o la fetta verticale nella vista HSL, per scegliere quel colore. Il pannello sotto il modello dà il codice esadecimale, i valori HSL, i colori di armonia e il rapporto di contrasto con lo sfondo che scegli.

Tre numeri, tre assi

Nello spazio colore sRGB usato dal web, un colore si scrive con tre valori di canale: rosso, verde e blu. Nel codice di tutti i giorni ogni canale è un numero intero da 0 a 255, l'intervallo che sta in otto bit. Un canale a 0 significa che quella luce è spenta. Un canale a 255 significa che è completamente accesa. Quindi rgb(255 0 0) è il rosso più forte che lo schermo può mostrare, rgb(0 0 0) è nero e rgb(255 255 255) è bianco.

Tre numeri che percorrono ciascuno un intervallo formano una scatola. Metti il rosso lungo uno spigolo, il verde lungo un altro e il blu lungo il terzo, e ogni colore ha un posto dentro un cubo. Il modello qui sopra disegna quel cubo con 512 piccoli blocchi, otto passi lungo ogni spigolo. Il nero sta in un angolo. Il bianco sta nell'angolo opposto. I tre angoli vicini al nero sono rosso puro, verde puro e blu puro. I tre angoli vicini al bianco sono ciano, magenta e giallo, ciascuno fatto di due canali al massimo. Attiva le etichette e segui gli spigoli dal nero al bianco: ogni percorso passa per un colore primario e uno secondario.

La linea tratteggiata dal nero al bianco è l'asse dei grigi. Ogni punto su di essa ha rosso, verde e blu uguali, come rgb(128 128 128). I colori lontani da quella linea sono vivaci. I colori vicini sono grigiastri. È il primo accenno dell'idea dietro il modello HSL nell'unità successiva: la distanza dall'asse dei grigi è una misura di quanto è colorato qualcosa.

Leggere un codice esadecimale

CSS permette di scrivere gli stessi tre numeri anche in esadecimale, dopo un segno #. L'esadecimale conta per sedici usando le cifre da 0 a 9 e le lettere da a a f, dove a è 10 e f è 15. Due cifre esadecimali coprono 16 × 16 = 256 valori, esattamente un canale. Quindi un codice di sei cifre è tre coppie: rosso, verde, blu. CSS Color 4 nota che maiuscole e minuscole non contano, quindi #00ff00 e #00FF00 sono lo stesso colore.

Il codice #2273c3 diviso nei suoi tre canali. La prima cifra di ogni coppia conta i gruppi di sedici, la seconda le unità.

Per leggere una coppia, moltiplica la prima cifra per 16 e somma la seconda. Per c3 è 12 × 16 + 3 = 195. Per ff è 15 × 16 + 15 = 255, il massimo. Per 80 è 8 × 16 = 128, quasi esattamente a metà. Un codice di tre cifre come #f80 è un'abbreviazione: ogni cifra viene ripetuta due volte di seguito, quindi #f80 significa #ff8800. Scrivi un codice nella casella Codice esadecimale sotto il modello e il segnaposto salta a quel punto del cubo.

ContestoL'idea di costruire qualsiasi colore da tre immagini filtrate fu mostrata in pubblico nel 1861. A una conferenza alla Royal Institution di Londra, James Clerk Maxwell presentò la fotografia di un nastro di tartan. Il fotografo Thomas Sutton l'aveva scattata tre volte, attraverso filtri rosso, verde e blu. Ogni immagine fu poi proiettata attraverso lo stesso filtro con cui era stata scattata, e le tre proiezioni furono sovrapposte su uno schermo. Le lastre erano ben lontane dalla perfezione, ma il metodo dei tre canali filtrati è quello che ogni fotocamera digitale e ogni schermo usano ancora.

Colore	rgb()	Esadecimale
Nero	rgb(0 0 0)	#000000
Bianco	rgb(255 255 255)	#ffffff
Rosso	rgb(255 0 0)	#ff0000
Giallo	rgb(255 255 0)	#ffff00
Ciano	rgb(0 255 255)	#00ffff
Grigio medio	rgb(128 128 128)	#808080

#ff0000	Rosso, rgb(255 0 0)
#00ffff	Ciano, rgb(0 255 255)
#ff00ff	Magenta, rgb(255 0 255)
#ffff00	Giallo, rgb(255 255 0)
#808080	Grigio medio, rgb(128 128 128)
#000	Nero, abbreviazione di #000000

Punti chiave

I colori sRGB sono tre canali, ciascuno da 0 a 255.
Il cubo RGB ha nero e bianco in angoli opposti e un asse dei grigi tra di essi.
Un codice esadecimale è tre coppie di cifre in base 16: rosso, verde, blu.
256³ = 16 777 216 colori.

Quanti valori può assumere un canale a 8 bit?
Quanti colori può indirizzare l'RGB a 8 bit?
Quanto vale in decimale la coppia esadecimale c3?
Qual è il canale rosso di #a8581b in decimale?
Scrivi il bianco come codice esadecimale di sei cifre.
Quale colore è #00ffff?
- Ciano
- Giallo
- Magenta
- Blu
Che cosa significa il codice breve #f80?
- #ff8800
- #f80000
- #0f0800
- #f8f8f8
Nel cubo RGB, quale angolo è opposto al nero?
- Bianco
- Rosso
- Blu
- Grigio
Quale di questi sta sull'asse dei grigi del cubo?
- rgb(90 90 90)
- rgb(90 0 90)
- rgb(255 90 90)
- rgb(0 0 90)
#00ff00 e #00FF00 sono lo stesso colore in CSS?
- Sì
- No
- Solo in alcuni browser
- Solo in stampa
In che anno Maxwell mostrò la fotografia a colori con tre filtri?

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