Colori

Il colore sugli schermi

La maggior parte dei display costruisce i colori mescolando luce rossa, verde e blu. Nel modello comune a 8 bit per canale, ogni canale va da 0 a 255, ottenendo 256³ ≈ 16,7 milioni di colori possibili. Due grafie popolari dello stesso triplo dominano il lavoro web: notazione funzionale RGB e codici esadecimali.

Convertite un valore hex in canali decimali con lo strumento hex a RGB.

Triple RGB

In CSS, rgb(34, 139, 34) significa rosso=34, verde=139, blu=34—un verde bosco. Il CSS moderno consente anche rgb(34 139 34 / 0.8) con una componente alfa (opacità). L’alfa non fa parte dell’hex classico a sei cifre senza estensione; vedi l’hex a otto cifre sotto.

I valori RGB nel CSS quotidiano sono device-referred: descrivono segnali inviati alla pipeline del display, non una corrispondenza di stampa garantita. Per stampa critica di brand, i designer usano profili ICC e altri flussi con gestione del colore.

Codifica hex

Un colore hex scrive ogni canale come due cifre esadecimali. Le cifre hex vanno da 0–9 poi A–F (case-insensitive), rappresentando 0–15. Due cifre rappresentano 0–255 perché 16×16 = 256.

Esempio: #228B22

• 22 hex → 2×16 + 2 = 34 decimale (rosso)
• 8B hex → 8×16 + 11 = 139 decimale (verde)
• 22 hex → 34 decimale (blu)

Quindi #228B22 equivale a rgb(34, 139, 34).

Il # iniziale è convenzionale in HTML/CSS. Alcuni sistemi lo omettono; altri lo richiedono.

Forma hex corta

CSS consente hex a tre cifre #rgb come abbreviazione in cui ogni cifra è duplicata: #2A8 si espande in #22AA88. Comodo per colori grossolani e design token, ma non esprime ogni triplo a 8 bit—solo quelli i cui canali sono multipli di 17 (0x00, 0x11, …, 0xFF).

Alfa in hex

L’hex a otto cifre #RRGGBBAA aggiunge un canale alfa. #228B2280 è circa il 50 % di opacità a seconda di come si interpreta la scala (0x80 / 255 ≈ 0,502). Il supporto è solido nei browser moderni; per ambienti più vecchi preferite rgba() / rgb() moderno con alfa.

L’hex corto a quattro cifre #rgba si espande in modo simile duplicando le cifre.

Convertire hex → RGB a mano

1. Togliete il #.
2. Se la lunghezza è 3 o 4, espandete le cifre.
3. Dividete in coppie.
4. Analizzate ogni coppia in base 16.
5. Opzionalmente convertite la coppia alfa in float 0–1 dividendola per 255.

Convertire RGB → hex

1. Bloccate i canali a interi 0–255.
2. Convertite ciascuno in due cifre hex (riempite con zero iniziale se serve).
3. Concatenate dopo #.

L’arrotondamento compare convertendo da formati con gamut più ampi o canali decimali—decidete se arrotondare o troncare e restate coerenti.

HSL e altri modelli

I designer pensano spesso in HSL (tonalità, saturazione, luminosità) perché regolare la tinta è naturale. I computer rasterizzano ancora verso RGB per i display tipici. La conversione HSL↔RGB è senza perdita per il gamut CSS se fatta con cura, ma l’arrotondamento intermedio può derivare dopo molti andata e ritorno.

Altri modelli (CIELAB, OKLCH, Display P3) compaiono nel CSS moderno per uniformità percettiva o gamut più ampi. Hex e sRGB restano la lingua franca di design token e specifiche più vecchie.

Accessibilità: il contrasto conta più dei codici

Scriviate #333333 o rgb(51,51,51), la leggibilità è il contrasto rispetto allo sfondo. I rapporti WCAG confrontano luminanze relative. Scegliere hex belli senza controllare il contrasto lascia il testo difficile da leggere. Accoppiate gli strumenti colore con un checker di contrasto per il corpo del testo e il chrome UI.

Design system e token

I team memorizzano i colori del brand come token nominati (--color-brand-600: #228B22) così i componenti non hard-codano hex a caso. Documentate hex e RGB se piattaforme diverse richiedono API diverse (il mobile nativo spesso vuole canali float 0–1).

Tenete un’unica fonte di verità; generate gli altri formati. Liste parallele mantenute a mano derivano.

Errori comuni

• Confondere le regole di espansione #RGB.
• Dimenticare che 100% nel RGB CSS moderno non è la stessa sintassi degli interi 0–255.
• Assumere che l’hex a schermo corrisponda al pantone stampato senza color management.
• Usare #000000 puro su #111111 per testo «sottile»—il contrasto può fallire con tipografia piccola.
• Analizzare hex con regex che consente lunghezze dispari senza validazione.

Suggerimenti programmatici

• Normalizzate hex a maiuscole o minuscole nel codice per stabilità dei diff.
• Validate con un pattern rigoroso: ^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$ (adattate se vietate le forme corte).
• Nell’interpolazione di animazioni, convertite in uno spazio lineare o usate l’interpolazione colore CSS moderna invece di lerpare naïvement stringhe hex come testo.

Flusso con i convertitori

Quando uno strumento di design esporta hex e un’API grafica vuole byte:

1. Incollate hex in un convertitore.
2. Confermate i canali.
3. Passate interi o float normalizzati all’API.
4. Controllate visivamente alcuni colori di brand.

Lo strumento from-hex-to-rgb è pensato per quel ciclo rapido di conferma.

Sintesi

I colori hex sono grafie in base 16 dei byte dei canali RGB. L’hex a sei cifre mappa direttamente tre componenti 0–255; le forme corta e a otto cifre estendono l’idea per brevità e alfa. Imparate una volta la conversione a coppie, tenete i token coerenti e verificate il contrasto—perché il formato scelto conta meno della leggibilità dell’interfaccia.