HEX, RGB, HSL, CMYK e come verificare il contrasto del testo

Un codice colore è lo stesso colore scritto in una notazione diversa. HEX, RGB e HSL descrivono la stessa luce su uno schermo, quindi si convertono l'una nell'altra in modo esatto, a parte gli arrotondamenti. CMYK descrive l'inchiostro su carta, perciò la sua conversione dai valori dello schermo è solo una stima. Il rapporto di contrasto WCAG è un numero a parte che confronta quanto due colori sono chiari o scuri tra loro, e stabilisce se il testo è leggibile. Incolla un colore nel convertitore di colori per vedere tutti i formati insieme.

Convertitore di coloriMi serve un colore in un altro formatoUsalo gratis

Se il colore che ti serve si trova in una foto, in un logo o in uno screenshot, leggilo prima dal pixel con il selettore colori da immagine, poi incolla qui il codice HEX. Come scegliere un colore preciso da un'immagine spiega i passaggi.

HEX e RGB sono gli stessi numeri

Un codice HEX è composto da tre coppie di cifre esadecimali. #34D6A0 contiene un valore di rosso, uno di verde e uno di blu. Ogni coppia è un numero da 00 a FF, cioè da 0 a 255 in decimale. Quindi 34 vale 52, D6 vale 214 e A0 vale 160, e la forma RGB è rgb(52, 214, 160).

Scrivere il numero in esadecimale cambia solo l'aspetto. La forma abbreviata #abc equivale a #aabbcc, con ogni cifra raddoppiata. Un codice a otto cifre aggiunge in fondo una coppia per la trasparenza, da 00 (completamente trasparente) a FF (completamente opaco), quindi #34D6A080 è circa semitrasparente. RGBA esprime la stessa trasparenza con un numero da 0 a 1.

CSS accetta anche i nomi dei colori. rebeccapurple equivale a #663399. Il convertitore legge i nomi tramite il browser stesso, quindi funziona qualsiasi nome che il browser riconosca.

HSL descrive un colore come lo descriviamo noi

HSL sta per tonalità (hue), saturazione e luminosità (lightness). La tonalità è un angolo lungo il cerchio dei colori: il rosso è 0 gradi, il verde 120 e il blu 240. La saturazione indica quanto il colore si allontana dal grigio, mentre la luminosità indica quanto si allontana dal nero o dal bianco.

Lo stesso #34D6A0 è hsl(160, 66%, 52%). La sua tonalità si trova tra verde e blu, la saturazione è alta e la luminosità è appena sopra la metà. HSL è la forma più semplice da modificare a mano, perché puoi mantenere la tonalità e cambiare solo la luminosità per ottenere una sfumatura più chiara o più scura.

HSV è simile a HSL, ma usa il valore (value), cioè la luminosità del canale più intenso, al posto della luminosità. Alcuni selettori di colore lo usano, quindi potresti incontrarlo in altri strumenti. Il convertitore lo mostra accanto a HSL così puoi confrontarli.

CMYK è per l'inchiostro, quindi è una stima

Gli schermi aggiungono luce: rosso, verde e blu insieme danno il bianco. Le stampanti tolgono luce con l'inchiostro: ciano, magenta, giallo e nero su carta bianca. I due sistemi non possono coincidere alla perfezione, quindi un valore CMYK è sempre una traduzione.

Il convertitore usa la formula semplice. Il nero è K, cioè uno meno il valore più alto tra rosso, verde e blu, su una scala da 0 a 1. Ciano, magenta e giallo vengono poi calcolati da ciò che resta dopo K. La formula ignora l'inchiostro, la carta e il profilo colore che usa la stampante. Il risultato stampato sarà quindi diverso, e i colori molto brillanti possono trovarsi fuori dalla gamma che gli inchiostri CMYK riescono a stampare. Usa il valore CMYK per iniziare il confronto con una tipografia o una stamperia, e chiedi una prova colore prima di una tiratura grande.

Il contrasto riguarda la luce, non la tonalità

Il rapporto di contrasto WCAG confronta due colori in base alla loro luminanza relativa. La luminanza si calcola dai valori di rosso, verde e blu dopo la correzione gamma, e il verde pesa di più perché l'occhio umano lo percepisce di più. Ogni canale viene prima convertito dalla scala da 0 a 255, e la luminanza è 0,2126 per il rosso, più 0,7152 per il verde, più 0,0722 per il blu.

Il rapporto è la luminanza più chiara più 0,05, diviso la luminanza più scura più 0,05. Nero su bianco dà 21 a 1, il valore massimo possibile. Due colori possono sembrare molto diversi per tonalità e avere comunque un rapporto basso se hanno la stessa luminosità: è proprio il caso che il controllo serve a individuare. Lo stesso contrasto scarso è il motivo per cui i codici QR non si leggono.

Le soglie

WCAG 2.x prevede due livelli, e il rapporto richiesto dipende dalla dimensione del testo.

• Livello AA: 4,5 a 1 per il testo normale, e 3 a 1 per il testo grande.
• Livello AAA: 7 a 1 per il testo normale, e 4,5 a 1 per il testo grande.

Il testo grande è di 24 pixel o più, oppure di 18,66 pixel in grassetto. Tutto ciò che è più piccolo conta come testo normale. Il grigio su bianco è un errore comune: un grigio medio come #777777 su bianco dà circa 4,48 a 1. Non supera AA per il testo normale per un margine minimo, mentre supera AA per i titoli grandi.

Il convertitore mostra il rapporto arrotondato a due decimali, ma ogni esito di superamento o fallimento usa il valore esatto. Un valore che appare come 4,50 può quindi non superare la prova se è appena sotto. Il controllo misura una sola cosa. Non considera lo spessore del carattere, l'interlinea o il modo in cui le persone con daltonismo vedono un progetto, quindi verifica anche la pagina reale alle sue dimensioni reali.

Tinte e sfumature

La striscia sotto il convertitore mostra nove passaggi intorno al colore: quattro tinte mescolate verso il bianco, il colore stesso e quattro sfumature mescolate verso il nero. Cliccando su uno di essi copi il suo codice HEX. Ti è utile quando ti servono più colori collegati, come uno sfondo chiaro, uno stato al passaggio del mouse e un colore del testo scuro, tutti ricavati da un unico colore del marchio. Controlla ogni coppia che scegli con la sezione sul contrasto prima di usarla.

Come farlo con fixmint

1. Incolla un colore nella casella Color come HEX, RGB, HSL o un nome CSS come rebeccapurple.
2. Leggi le righe HEX, RGB, HSL, HSV e CMYK. Premi Copy accanto a quella che ti serve. Il CMYK è indicato come approssimativo.
3. Scrivi il colore di sfondo in Background, oppure usa il suo campione, e leggi il rapporto sotto On white, On black e On your background.
4. Controlla i quattro indicatori sotto ogni rapporto: AA e AAA, ciascuno per il testo normale e per il testo grande.
5. Nella sezione Tints and shades, tocca un campione per copiarlo.

Risposte rapide

Il valore CMYK è esatto?

No. È una semplice conversione aritmetica che ignora la stampante, la carta e il profilo colore. Considerala un punto di partenza e chiedi una prova colore.

Un rapporto di contrasto superato rende un progetto accessibile?

Significa che i colori del testo rispettano una soglia misurabile. L'accessibilità dipende anche da dimensioni, spaziatura, animazioni e da come è costruita la pagina, quindi il rapporto è una guida, non una verifica completa.

Quale formato devo salvare in un foglio di stile?

Quello che riesci a leggere e modificare più facilmente. HEX è compatto e diffuso. HSL è più facile da regolare a mano, perché cambi la luminosità senza cambiare la tonalità.