Calcolatore colori
Calcolatore Colori PRO
Converti e analizza i colori, verifica il contrasto WCAG, genera palette, miscela colori e crea gradienti CSS.
Colore di input
Componenti del colore
Impostazioni del contrasto
Impostazioni dell’armonia
Impostazioni della miscelazione
Impostazioni del gradiente
Stop del gradiente
I colori sullo schermo dipendono da display, browser, profilo colore e luce ambiente. Per lavori destinati alla stampa usa strumenti calibrati.
Risultati
Un calcolatore di colori converte valori cromatici, verifica il contrasto per l’accessibilità, confronta differenze, genera palette, miscela colori e costruisce gradienti CSS da un’unica interfaccia.
Designer e sviluppatori lavorano spesso con più modelli contemporaneamente. Uno strumento utile deve spiegare ogni conversione, preservare la trasparenza alfa e chiarire dove il risultato matematico non garantisce lo stesso aspetto su schermi, browser o supporti di stampa differenti.
Che cosa può fare il calcolatore
- convertire tra HEX, RGB, HSL, HSV, HWB e CMYK;
- calcolare CIE XYZ, Lab e LCh con punto di bianco D65;
- convertire da e verso OKLab e OKLCh;
- mostrare trasparenza alfa e anteprima in tempo reale;
- controllare se il colore rientra nel gamut sRGB;
- confrontare due colori con Delta E 76 e Delta E 2000;
- calcolare il contrasto WCAG per testo normale e grande;
- consigliare testo nero o bianco e proporre alternative accessibili;
- generare palette complementari, analoghe, triadiche e altre armonie;
- miscelare colori in sRGB, RGB lineare oppure OKLab;
- creare gradienti CSS lineari, radiali e conici;
- esportare i risultati in CSV.
HEX e RGB descrivono i canali sRGB
La notazione HEX memorizza rosso, verde e blu come valori esadecimali. Il colore #5869FF contiene rosso 88, verde 105 e blu 255.
Ogni coppia va da 00 a FF, equivalente all’intervallo 0–255:
#5869FF = rgb(88, 105, 255).
Un valore HEX a otto cifre o RGBA aggiunge il canale alfa. In #5869FF80, la coppia finale rappresenta circa il 50% di opacità.
L’alfa non definisce da solo il colore visibile: il browser combina il primo piano con lo sfondo.
Come si converte HEX in RGB
Dividi il codice HEX in tre coppie e converti ogni coppia dalla base 16 alla base 10:
- 58 esadecimale = 88;
- 69 esadecimale = 105;
- FF esadecimale = 255.
Per la conversione inversa, ogni canale RGB viene trasformato in due cifre esadecimali. I valori inferiori a 16 richiedono uno zero iniziale.
HSL, HSV e HWB offrono controlli differenti
HSL separa tonalità, saturazione e luminosità. È pratico per ruotare una tonalità o costruire variazioni rapide, ma la luminosità HSL non corrisponde alla luminosità percepita.
HSV, chiamato anche HSB, usa tonalità, saturazione e valore. Molti selettori cromatici lo adottano perché si presta a un controllo bidimensionale di saturazione e brillantezza.
HWB descrive invece tonalità, quantità di bianco e quantità di nero aggiunte a un colore saturo.
| Modello | Uso tipico | Limite principale |
|---|---|---|
| HSL | Rotazione della tonalità e controlli UI semplici | La luminosità non è percettivamente uniforme |
| HSV / HSB | Selettori cromatici interattivi | Il valore non equivale alla luminanza relativa |
| HWB | Regolazione di bianco e nero | Descrive comunque colori basati su sRGB |
Perché due colori con la stessa luminosità HSL possono sembrare diversi
La percezione umana non attribuisce lo stesso peso a tutti i canali. Un giallo saturo può apparire molto più luminoso di un blu con identico valore HSL.
Di conseguenza, HSL è utile per l’interazione, ma non deve sostituire il calcolo della luminanza relativa o una verifica percettiva.
CMYK senza profilo è soltanto una stima
CMYK descrive componenti di ciano, magenta, giallo e nero. Una formula RGB–CMYK generica può fornire un riferimento iniziale, ma non può prevedere macchina da stampa, inchiostri, carta e intento di rendering.
La gestione colore professionale usa profili ICC per collegare codifiche e dispositivi. Il risultato del calcolatore è quindi adatto alla pianificazione, non alla separazione definitiva per la stampa.
CIE XYZ come riferimento di conversione
CIE XYZ è un riferimento indipendente dal dispositivo utilizzato da molte conversioni. Il calcolatore decodifica prima la curva sRGB ottenendo RGB lineare, poi applica la matrice sRGB–XYZ.
Il punto di bianco usato per sRGB è D65. La componente Y è collegata alla luminanza, mentre X e Z contribuiscono alla descrizione della cromaticità.
I risultati vengono mostrati su una scala simile a 0–100 per facilitarne la lettura.
Lab e LCh per confrontare colori
CIE Lab usa L per la luminosità e gli assi a e b per direzioni cromatiche opponenti.
LCh esprime lo stesso colore con luminosità, croma e angolo di tonalità:
Croma = √(a² + b²).
Tonalità = atan2(b, a).
La specifica CSS Color 4 include le funzioni Lab e LCh e le relative conversioni tra coordinate cartesiane e polari.
Lab cerca di far corrispondere meglio la distanza numerica alla distanza visiva rispetto a RGB, ma non è perfettamente uniforme.
OKLab e OKLCh per palette digitali più regolari
OKLab è uno spazio percettivo più recente, progettato per operazioni come interpolazione e modifica della luminosità. OKLCh ne rappresenta la forma polare con luminosità, croma e tonalità.
La specifica CSS Color 4 definisce entrambe le notazioni e i relativi algoritmi.
La modifica della luminosità in OKLCh appare spesso più coerente rispetto a HSL, soprattutto quando si costruiscono scale di colori per interfacce.
Che cosa significa un avviso fuori gamut
Il gamut è l’insieme dei colori rappresentabili in uno spazio. Lab e OKLCh possono descrivere colori che sRGB non riesce a visualizzare.
Se la conversione produce un canale RGB lineare negativo o superiore a uno, il colore esatto si trova fuori da sRGB.
Il clipping riporta i canali nell’intervallo valido, ma può modificare tonalità, croma o luminosità. Un flusso professionale può preferire una mappatura del gamut più controllata.
sRGB, Display P3 e anteprima del browser
Molti contenuti web sono ancora progettati per sRGB, mentre alcuni dispositivi supportano gamut più ampi come Display P3.
Un colore valido in P3 può risultare fuori gamut in sRGB. Per mantenere una resa prevedibile, il calcolatore può mostrare il colore sRGB più vicino e segnalare la perdita di croma.
L’anteprima deve essere controllata anche su dispositivi che non supportano lo spazio più ampio.
Delta E 76
Delta E misura la differenza numerica tra due colori. La formula Delta E 76 usa la distanza euclidea in Lab:
ΔE76 = √((ΔL)² + (Δa)² + (Δb)²).
È semplice e trasparente, ma può sovrastimare o sottostimare differenze in determinate regioni dello spazio Lab.
Delta E 2000
Delta E 2000 introduce correzioni per interazioni tra luminosità, croma e tonalità.
In molti casi segue meglio la percezione umana, soprattutto dove la distanza Lab standard si comporta in modo irregolare.
Non esiste però una soglia universale valida per ogni settore. Grafica digitale, tessile, automotive, vernici e stampa possono usare tolleranze molto differenti.
Il contrasto WCAG usa la luminanza relativa
La modalità accessibilità calcola il rapporto:
Rapporto di contrasto = (luminanza più chiara + 0,05) ÷ (luminanza più scura + 0,05).
WCAG 2.2 richiede almeno:
- 4,5:1 per testo normale al livello AA;
- 3:1 per testo grande al livello AA;
- 7:1 per testo normale al livello AAA;
- 4,5:1 per testo grande al livello AAA.
Per testo grande, WCAG usa almeno 18 punti oppure 14 punti in grassetto. Nelle approssimazioni web ricorrono spesso 24 CSS px oppure circa 18,66 px in grassetto.
Contrasto di componenti e grafica
Per componenti dell’interfaccia, indicatori e parti grafiche necessarie alla comprensione, WCAG 2.2 prevede normalmente un contrasto di almeno 3:1 rispetto ai colori adiacenti.
Questo controllo è distinto dal contrasto del testo. Un pulsante può avere un’etichetta leggibile ma un bordo o indicatore di stato troppo debole.
Trasparenza e contrasto effettivo
Il calcolatore combina il colore trasparente con lo sfondo prima di misurare il contrasto.
Una verifica effettuata sul valore RGBA senza compositing può produrre un risultato errato, perché il colore realmente visualizzato dipende dallo sfondo sottostante.
Testo nero o bianco
Il calcolatore confronta automaticamente nero e bianco sul colore selezionato e sceglie il rapporto maggiore.
Questa scelta massimizza il contrasto tra le due opzioni, ma non garantisce da sola una palette completa accessibile. Occorre verificare anche stati hover, focus, disabled, selected ed error.
Il colore non deve essere l’unico segnale
WCAG vieta di usare il colore come unico mezzo visivo per trasmettere informazioni, indicare un’azione o distinguere un elemento.
Messaggi di errore, serie di un grafico e stati di sistema devono includere testo, icone, pattern, forme o altre differenze.
Un verde e un rosso possono entrambi superare il contrasto sul bianco e restare comunque difficili da distinguere per alcune persone.
Come vengono generate le armonie
Le armonie ruotano l’angolo della tonalità oppure modificano luminosità e saturazione secondo schemi matematici:
- complementare: due tonalità separate di circa 180°;
- analoga: tonalità vicine alla base;
- triadica: tre tonalità a circa 120°;
- complementare divisa: la base e due tonalità intorno alla complementare;
- tetradica e quadrata: quattro posizioni cromatiche;
- monocromatica: una tonalità con luminosità o saturazione differenti;
- ombre, tinte e toni: miscele con nero, bianco o grigio.
Questi schemi sono punti di partenza. Una palette completa richiede gerarchia, controllo del contrasto e colori per gli stati interattivi.
Perché lo spazio di miscelazione cambia il risultato
La miscelazione sRGB diretta media i canali codificati con gamma.
RGB lineare converte prima i canali in luce lineare, esegue la media e riconverte il risultato in sRGB. Il punto intermedio appare spesso più luminoso.
OKLab interpola invece coordinate percettive e può produrre transizioni visivamente più equilibrate.
Miscelazione digitale e miscelazione fisica
La media di valori RGB non simula automaticamente pigmenti, vernici o inchiostri.
La miscelazione digitale descrive l’interpolazione tra valori di colore; quella fisica dipende da assorbimento, riflessione, spessore e proprietà spettrali dei materiali.
Per formulazioni reali servono modelli e misure specifiche del settore.
Costruire gradienti CSS
La modalità gradienti crea funzioni lineari, radiali e coniche. Ogni stop contiene un colore e una posizione tra 0% e 100%.
I gradienti lineari e conici accettano anche un angolo. Lo strumento mostra un’anteprima e la dichiarazione CSS completa.
linear-gradient(90deg, #5869FF 0%, #FF6B8A 100%)
Gradienti molto delicati possono mostrare banding su display limitati o immagini compresse.
Ordine e posizione degli stop
Gli stop dovrebbero essere ordinati per posizione. Due stop nella stessa posizione possono creare un passaggio netto anziché una transizione morbida.
Quando le posizioni vengono omesse, il browser distribuisce gli stop secondo le regole CSS. Inserirle esplicitamente rende il risultato più facile da riprodurre e modificare.
Preservare il canale alfa
Durante la conversione tra formati, il calcolatore conserva l’opacità quando il formato di destinazione la supporta.
HEX a sei cifre non include alfa, mentre HEX a otto cifre, RGBA, HSLA e le moderne funzioni CSS possono rappresentarlo.
Quando si esporta verso un formato privo di trasparenza, occorre scegliere uno sfondo di compositing.
Errori frequenti
- considerare la luminosità HSL come luminosità percepita;
- misurare la distanza RGB invece di usare una formula Delta E adatta;
- controllare il contrasto senza lo sfondo reale;
- ignorare il compositing alfa;
- presumere che ogni colore Lab o OKLCh rientri in sRGB;
- usare valori CMYK generici come separazioni pronte per la stampa;
- costruire una palette senza verificare gli stati interattivi;
- comunicare uno stato soltanto con la tonalità;
- presumere che due monitor mostrino lo stesso colore nello stesso modo.
Come verificare il risultato per il web
- Controlla il CSS finale nei browser di destinazione.
- Verifica le combinazioni reali tra primo piano e sfondo.
- Se esiste alfa, misura il colore dopo il compositing.
- Controlla separatamente testo normale e grande.
- Verifica componenti, focus, hover, disabled, selected ed error.
- Non affidare informazioni essenziali soltanto al colore.
- Prova la palette su display con caratteristiche differenti.
Come verificare il risultato per stampa e brand
Per lavori destinati alla stampa usa display calibrati, profili ICC richiesti e una prova colore.
Quando comunichi valori Lab o XYZ, specifica spazio, punto di bianco e condizioni di misura. Un numero privo di contesto può essere interpretato in modo diverso.
Conserva insieme al progetto i profili utilizzati, la versione dei file e le specifiche del fornitore.
Domande frequenti
HEX e RGB sono sistemi diversi?
Di solito rappresentano gli stessi canali sRGB. HEX usa la notazione esadecimale, mentre RGB esprime i canali con valori numerici decimali.
Quale spazio colore è più adatto per creare palette?
OKLCh offre spesso un controllo più regolare della luminosità nelle palette digitali, ma ogni colore deve comunque essere verificato per gamut e contrasto.
Quale rapporto di contrasto richiede WCAG?
WCAG 2.2 richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande al livello AA. Al livello AAA richiede rispettivamente 7:1 e 4,5:1.
Che cosa indica Delta E?
Delta E misura numericamente la differenza tra due colori. La formula Delta E 2000 tende a rappresentare la percezione meglio della più semplice Delta E 76.
Posso inviare direttamente in stampa i valori CMYK calcolati?
No. Una conversione CMYK generica non comprende macchina da stampa, inchiostri, carta, intento di rendering e profilo ICC necessari per una produzione controllata.
Perché lo stesso colore appare diverso su un altro schermo?
Gamut, calibrazione, profilo ICC, luminosità del display, gestione colore del software e luce ambiente possono modificare l’aspetto percepito.
Riferimenti tecnici ufficiali
- W3C: CSS Color Module Level 4
- W3C: CSS Color Module Level 5
- W3C: Web Content Accessibility Guidelines 2.2
- W3C: tecnica G18 per il contrasto del testo
- W3C: contrasto non testuale
- W3C: uso del colore
- International Color Consortium: specifiche ICC correnti
- International Color Consortium: introduzione ai profili ICC
- Schema.org: FAQPage
Fonti verificate il 24 giugno 2026.
