FAQ di Convertitore di colori (HEX, RGB, HSL)

Come converto HEX in RGB?

Per convertire un codice colore hex in RGB, dividi la stringa esadecimale a sei cifre #RRGGBB in tre coppie, quindi converti ogni coppia da esadecimale (base-16) a decimale (base-10).

Esempio: #FF5733

FF = 255 (Rosso)
57 = 87 (Verde)
33 = 51 (Blu)
Risultato: rgb(255, 87, 51)

Per l'hex abbreviato (#F53), espandi prima ogni cifra in una coppia: #F53 diventa #FF5533. Le cifre raddoppiano: F si espande in FF, 5 in 55, 3 in 33.

L'hex a otto cifre (#RRGGBBAA) funziona allo stesso modo ma con una coppia in più per il canale alfa. #FF573380 aggiunge 80 (128, ovvero circa il 50% di opacità) per il canale alfa.

Per conversioni immediate, usa il nostro convertitore di colori. Gestisce tutti i formati, inclusi hex breve e lungo, con e senza alfa.

Qual è la differenza tra RGB e RGBA?

RGB definisce un colore usando i canali rosso, verde e blu. RGBA è RGB con un canale Alfa aggiuntivo che controlla l'opacità. Il valore alfa varia da 0.0 (completamente trasparente) a 1.0 (completamente opaco).

rgb(255, 0, 0)         /* Rosso completamente opaco */
rgba(255, 0, 0, 0.5)  /* Rosso al 50% di opacità */

Nel CSS moderno (CSS Color Level 4), l'alias rgba() non è più necessario. La funzione rgb() ora accetta un canale alfa opzionale:

rgb(255 0 0 / 0.5)  /* Sintassi moderna, rosso al 50% di opacità */

Tutti i browser moderni supportano questa sintassi. La funzione legacy rgba() funziona ovunque e non verrà rimossa, ma usare rgb() con la sintassi a barra è l'approccio raccomandato per il nuovo codice.

Come converto RGB in HSL?

Convertire RGB in HSL comporta tre passaggi:

Normalizza i valori RGB nell'intervallo 0-1 (dividi per 255)
Trova il min e il max dei tre valori normalizzati — la media di min e max è la luminosità (L)
Calcola tonalità e saturazione in base a quale canale è il max e alla differenza tra max e min

La formula varia a seconda di quale canale di colore domina:

Se il rosso è il massimo: tonalità = (verde - blu) / (max - min)
Se il verde è il massimo: tonalità = 2 + (blu - rosso) / (max - min)
Se il blu è il massimo: tonalità = 4 + (rosso - verde) / (max - min)
La saturazione dipende dalla luminosità: se L > 0.5, saturazione = (max - min) / (2 - max - min), altrimenti saturazione = (max - min) / (max + min)

La matematica non è banale ed è facile sbagliarla, quindi usare uno strumento di conversione colori è consigliato per risultati immediati.

Perché i miei colori appaiono diversi su schermi diversi?

L'aspetto dei colori varia tra schermi per diverse ragioni:

Calibrazione dello schermo — La maggior parte degli schermi consumer non è calibrata per i colori. Le impostazioni di fabbrica variano ampiamente in luminosità, contrasto e temperatura del colore.

Differenze di gamut di colore — Schermi diversi supportano gamme di colore diverse. L'sRGB è lo standard web, ma molti telefoni e laptop moderni supportano il DCI-P3 (più ampio del 25%). Un colore fuori dal gamut sRGB appare corretto su un display a gamut ampio ma viene tagliato o spostato su un display standard.

Tecnologia di visualizzazione — Gli schermi OLED producono neri più profondi e colori più saturi rispetto agli schermi LCD. I pannelli IPS hanno una migliore precisione cromatica rispetto ai pannelli TN.

Angolo di visione — I colori cambiano se visti da un'angolazione, soprattutto su display di fascia bassa.

Luminosità e luce ambientale — Uno schermo al 50% di luminosità in una stanza buia appare diverso dallo stesso schermo al 100% di luminosità alla luce diretta del sole.

Per ridurre al minimo le differenze: Lavora nello spazio colore sRGB, calibra il monitor con un calibratore hardware e testa i tuoi progetti su più dispositivi prima della pubblicazione.

A cosa serve il modello di colore HSL?

HSL (Tonalità, Saturazione, Luminosità) è ideale per la manipolazione programmatica dei colori. Il suo vantaggio principale è che un canale porta l'informazione del "colore" (la tonalità), mentre gli altri due controllano l'aspetto indipendentemente dal valore della tonalità.

Cosa rende facile HSL:

Tavolozze di colori — Mantieni la stessa tonalità, varia luminosità e saturazione per creare una scala di colori completa
Stati hover e attivi — Cambia la luminosità di una percentuale fissa: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
Modalità scura — Riduci la luminosità di tutti i colori: sottrai il 30% dalla luminosità di ogni colore
Temi — Scambia i valori di tonalità per generare schemi di colori completamente nuovi dalla stessa struttura di saturazione/luminosità
Stati disabilitati — Riduci la saturazione per desaturare gli elementi: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

Per cosa HSL non è adatto:

L'HSL non è percettivamente uniforme. Due colori con lo stesso valore di luminosità (ad es., hsl(60, 100%, 50%) — giallo brillante e hsl(240, 100%, 50%) — blu puro) hanno una luminosità percepita molto diversa. Per una manipolazione dei colori percettivamente uniforme, usa OKLCH.

Cosa significa il # nei colori hex?

Il prefisso # (cancelletto o simbolo di libbra) indica al parser CSS che i caratteri seguenti rappresentano un valore di colore esadecimale. È la notazione standard in CSS e HTML per i codici colore hex.

Il formato completo è #RRGGBB o #RRGGBBAA:

| Componente | Significato | Esempio (#FF5733) | |-----------|---------|---------------------| | # | Prefisso hex | Indicatore obbligatorio | | RR | Canale rosso | FF (255) | | GG | Canale verde | 57 (87) | | BB | Canale blu | 33 (51) |

In HTML, il # è usato anche per i link di ancoraggio (<a href="#section">), ma in un contesto CSS o in un attributo style indica sempre un colore hex. HTML supporta anche i "named colors" legacy (140 nomi predefiniti come red, blue, rebeccapurple) che non richiedono il #.

Cos'è il gamut di colore e perché è importante?

Il gamut di colore è la gamma di colori che un dispositivo può visualizzare o che uno spazio colore può rappresentare. Pensalo come il "vocabolario" di colori disponibile per uno schermo o un formato di file.

Gamut di colore comuni, dal più piccolo al più ampio:

| Spazio colore | Dimensione relativa | Dove viene usato | |-------------|--------------|------------| | sRGB | Baseline | Standard web, la maggior parte dei monitor, tutti i browser | | Adobe RGB | ~50% più ampio | Fotografia professionale, stampa | | DCI-P3 | ~25% più ampio | Telefoni moderni, Mac, molti laptop | | Rec. 2020 | ~75% più ampio | TV HDR, display di fascia alta |

Perché è importante: Un colore fuori dal gamut di uno schermo non può essere visualizzato con precisione. Il dispositivo taglierà il colore al valore in-gamut più vicino o lo approssimerà. Ecco perché un rosso intenso e profondo in un file di design potrebbe apparire spento o opaco su uno schermo laptop standard.

Per il design web: Progetta sempre in sRGB o verifica che i tuoi colori siano sRGB-safe. OKLCH e lo spazio colore display-p3 ti permettono di puntare a gamut più ampi, ma dovresti fornire un fallback sRGB per gli schermi standard.

Qual è la differenza tra hex e hex con alfa?

L'hex standard (#FF5733) usa sei cifre e non ha canale alfa — il colore è sempre completamente opaco. L'hex con alfa (#FF573380) usa otto cifre, aggiungendo due cifre esadecimali alla fine per il canale alfa (opacità).

Valori alfa in hex:

| Coppia Hex | Decimale | Opacità | |----------|---------|---------| | 00 | 0 | Completamente trasparente | | 80 | 128 | ~50% di opacità | | FF | 255 | Completamente opaco |

Esempi:

#FF5733     — Rosso-arancio pieno, nessuna trasparenza
#FF5733FF   — Stesso colore, completamente opaco (FF ridondante)
#FF573380   — Stesso colore, trasparente al 50%
#FF573300   — Stesso colore, completamente invisibile

Esiste anche l'hex abbreviato a quattro cifre con alfa: #F538 si espande in #FF553388 (50% di opacità).

Supporto browser: L'hex a otto cifre è supportato in tutti i browser moderni. Per il supporto dei browser legacy (Internet Explorer), usa rgba().

Come scelgo colori accessibili per il mio sito web?

Segui questo processo passo-passo per costruire un sistema di colori accessibile:

1. Inizia con un colore brand primario. Scegli una tonalità che rappresenti il tuo brand, poi usa HSL o OKLCH per creare una scala completa dal molto chiaro (sfondi) al molto scuro (testo).

2. Imposta il testo su un nero quasi puro. Il testo del corpo su sfondi bianchi dovrebbe essere da #1A1A1A a #333333. Non usare mai nero puro (#000000) su bianco puro — causa affaticamento degli occhi per alcuni lettori. Il grigio scuro su bianco offre una migliore leggibilità.

3. Controlla ogni coppia primo-piano/sfondo. Ogni combinazione di testo e sfondo deve soddisfare gli standard WCAG:

Testo normale: minimo 4.5:1 (WCAG AA)
Testo grande: minimo 3:1 (WCAG AA)
Punta a 7:1 per il testo del corpo (WCAG AAA)

4. Non usare mai il colore come unico elemento distintivo. I link devono avere sottolineature (non solo un colore diverso). Gli stati di errore devono includere icone o testo. I grafici devono usare motivi o etichette.

5. Testa con simulatori di daltonismo. La deuteranopia (rosso-verde) è il tipo più comune. Assicurati che il tuo design funzioni senza percezione dei colori.

6. Verifica in scala di grigi. Se il tuo design perde significato quando viene convertito in scala di grigi, ti stai affidando troppo al colore per trasmettere informazioni.

Usa il nostro convertitore di colori per verificare istantaneamente i rapporti di contrasto tra due colori qualsiasi.