Convertitore di colori
Converti un colore tra HEX, RGB, HSL e HSV, con il suo contrasto rispetto al nero e al bianco.
Gira interamente nel tuo browser. Non viene caricato, registrato o salvato niente.
Esadecimale
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Luminanza relativa
- 0,2830
- Contrasto su bianco
- 3,15:1
- Contrasto su nero
- 6,66:1
HEX, RGB, HSL e HSV sono quattro modi di scrivere lo stesso colore sRGB. Quale sia comodo dipende da cosa stai facendo: esadecimale per copiare un valore da un progetto grafico, HSL per schiarire un po' qualcosa senza cambiarne la tinta.
Come funziona
L'entrata viene letta in canali di rosso, verde e blu a otto bit più un alfa, e tutte le uscite sono calcolate a partire da quei canali. Non si converte niente a partire da un'altra uscita, quindi un valore non può scivolare lungo una catena di arrotondamenti.
Le cifre di contrasto seguono la WCAG 2.1: ogni canale viene linearizzato, pesato per quanto ne ricava l'occhio, e il rapporto è (il più chiaro + 0,05) diviso (il più scuro + 0,05). La scala va da 1 per due colori identici a 21 per nero su bianco.
Esempi
| Caso | Dati inseriti | Risultato |
|---|---|---|
| Un valore esadecimale da un file di progetto | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| La forma breve, che ripete ogni cifra | #39d | #3399DD, not #039D |
| Con trasparenza | rgb(52 152 219 / 0.5) | #3498DB80 |
Domande frequenti
Un contrasto di 4,5 vuol dire che il mio testo passa?
Dipende dal testo, ed è per questo che viene dato il numero e non un verdetto. La WCAG chiede 4,5 per il testo normale e 3 per il testo grande, dove grande significa almeno 18 punti, o 14 punti in grassetto. Uno strumento che vede solo due colori non può sapere quale regola si applichi.
Perché convertendo in HSL e tornando indietro a volte cambia una cifra?
Perché l'esadecimale ha 256 passi per canale e HSL non ci si divide in modo esatto. L'andata e ritorno può cadere a un passo di distanza. Qui tutte le notazioni sono calcolate dai canali originali, quindi i valori mostrati sono sempre i più vicini a quello che hai inserito.
Che differenza c'è tra HSL e HSV?
Condividono la tinta e non vanno d'accordo sul resto. In HSL, una luminosità del 100% è bianco e il 50% è il colore puro. In HSV, un valore del 100% è il colore puro e il bianco compare solo quando la saturazione scende a zero. Gli strumenti di grafica di solito mostrano HSV; il CSS parla HSL.
Sono supportati i colori con nome come «rebeccapurple»?
No. L'elenco delle parole chiave CSS è una tabella di circa 150 nomi che appartiene alla specifica e non all'aritmetica, e questo strumento converte tra notazioni invece di cercare nomi.
Da sapere
- Tutto qui è sRGB, lo spazio che il web ha sempre dato per scontato. Gli spazi più ampi aggiunti da CSS Color 4 — lab, oklch, display-p3 — descrivono colori che sRGB non raggiunge, e convertire verso di essi richiede una decisione su cosa fare di quelli che restano fuori. Quella decisione qui non viene presa.
- Le cifre di contrasto sono numeri, non verdetti. Se una coppia passi dipende dalla dimensione e dal peso del testo, che un colore da solo non conosce.