Informazioni su questo strumento
Quattro notazioni per lo stesso colore sRGB
HEX, RGB, HSL e HWB sono quattro modi di scrivere un colore in sRGB, lo spazio colore predefinito del web. HEX e RGB indicano direttamente i canali rosso, verde e blu, ciascuno da 0 a 255. HSL indica un angolo di tonalità, una saturazione e una luminosità; HWB usa lo stesso angolo di tonalità con una quantità di bianco e una di nero mescolate. Convertire dall'una all'altra cambia la notazione, non il colore.
Un codice hex di otto cifre come #5a3ff080, o un quarto valore dopo una barra come rgb(90 63 240 / 0.5), aggiunge un canale alfa. La forma separata da spazi è la sintassi di CSS Color Level 4 e funziona in tutti i browser attuali; la forma con le virgole, rgba(90, 63, 240, 0.5), resta per gli strumenti più vecchi.
Cosa aggiungono OKLCH e OKLab
OKLab è uno spazio colore ideato da Björn Ottosson nel 2020 in modo che passi numerici uguali appaiano all'occhio come passi uguali. OKLCH è lo stesso spazio in forma polare: luminosità da 0 a 1, croma (quanto è saturo il colore) e un angolo di tonalità. Due colori OKLCH con la stessa luminosità appaiono più o meno ugualmente chiari, cosa che non vale per HSL, dove un giallo e un blu al 50% di luminosità sono molto diversi.
OKLCH può anche descrivere colori che uno schermo sRGB non è in grado di mostrare. Quando ne inserisci uno, questo strumento ne mantiene luminosità e tonalità e abbassa la croma finché il colore non rientra nel gamut, e te lo segnala.
Come si calcola il rapporto di contrasto
WCAG 2 definisce il contrasto come (L1 + 0.05) / (L2 + 0.05), dove L1 e L2 sono la luminanza relativa del colore più chiaro e di quello più scuro. Il risultato va da 1:1 per due colori identici a 21:1 per il nero sul bianco.
Il livello AA richiede almeno 4.5:1 per il testo normale e 3:1 per il testo grande; il livello AAA richiede 7:1 e 4.5:1. Per testo grande si intende almeno 24 pixel CSS, o circa 18,7 pixel se in grassetto. Il rapporto mostrato qui è arrotondato per difetto, perché una coppia che misura 4.499:1 non raggiunge 4.5:1.
Come lo strumento calcola i valori
Le conversioni girano in JavaScript nel tuo browser, con la funzione di trasferimento sRGB e le matrici OKLab pubblicate insieme allo spazio colore. Ogni valore viene arrotondato a pochi decimali, scelti in modo che con queste formule il valore si riconverta nello stesso colore a 8 bit. Un browser può calcolare OKLCH e OKLab con costanti leggermente diverse, quindi un valore OKLCH o OKLab incollato può risultare spostato di uno o due passi su 255 in un canale, più spesso in un verde saturo. Il colore con nome più vicino è quello alla distanza minore in OKLab.