Convertitore di colori

Informazioni sui formati di colore

Lo stesso colore può essere scritto come HEX (#ff6600), RGB (rgb(255, 102, 0)) o HSL (hsl(24, 100%, 50%)) — tre modi diversi di descrivere lo stesso identico colore, ciascuno adatto a una situazione diversa.

L'HEX ha un'abbreviazione compatta: un codice a 3 cifre come #f60 equivale esattamente al codice a 6 cifre #ff6600 — ogni cifra viene semplicemente raddoppiata —, e una forma a 8 cifre come #ff6600cc aggiunge un canale alfa allo stesso modo di rgba() e hsla(). Questo strumento accetta e normalizza l'abbreviazione in input, e restituisce sempre la forma completa a 6 o 8 cifre, così il risultato è privo di ambiguità da incollare altrove. Una cosa che non fa: verificare il contrasto di accessibilità dei colori o simulare il daltonismo — è una questione di design distinta, altrettanto importante, indipendente dalla conversione di formato.

Dove lo incontrerai

• Tradurre un colore HEX fornito da un designer nell'RGB o HSL già usato dal codice
• Regolare luminosità o saturazione, operazione molto più intuitiva in HSL che in RGB
• Leggere un colore dagli stili calcolati di un browser e convertirlo per farlo corrispondere a una specifica di design
• Verificare come viene effettivamente renderizzato un valore di colore CSS prima di adottarlo

Domande frequenti

Perché esiste l'HSL se l'RGB funziona già?
L'RGB descrive un colore come intensità di luce rossa/verde/blu, il che corrisponde male al modo in cui le persone pensano al colore. L'HSL separa tonalità, saturazione e luminosità, quindi "rendilo più scuro" o "rendilo più vivace" significa modificare un solo numero invece di ricalcolarne tre.

Cosa significa il valore alfa in rgba()/hsla()?
È l'opacità, da 0 (completamente trasparente) a 1 (completamente opaco). Questo strumento la preserva tra i formati — anche come HEX a 8 cifre — quando il tuo input ne include una.

Sono supportati i colori CSS con nome come "tomato"?
Non ancora — solo input HEX, RGB(A) e HSL(A). Cerca prima il valore HEX del colore con nome se è quello il tuo punto di partenza.

#f60 è lo stesso colore di #ff6600?
Sì, esattamente. L'abbreviazione HEX a 3 cifre raddoppia ogni cifra per ottenere la forma completa: f diventa ff, 6 diventa 66, 0 diventa 00. È puramente un modo più breve di scrivere alcuni colori — solo quelli in cui ogni canale è per caso una cifra ripetuta —, non uno spazio colore diverso o meno preciso. Questo strumento accetta entrambe le lunghezze e restituisce sempre la forma completa a 6 o 8 cifre.