Articolo
Strumenti per i colori del web: hex, palette e accessibilità
Scegliere i colori per un sito web sembra semplice finché non ci si trova davanti a codici hex, terne RGB e angoli HSL che descrivono tutti la stessa cosa in modi diversi. Questo articolo spiega come questi formati sono collegati, come trasformare un singolo colore di marca in una palette utilizzabile e come assicurarsi che il risultato resti leggibile per chi percepisce il colore in modo diverso.
Hex, RGB e HSL descrivono lo stesso colore
Un colore sullo schermo è composto da luce rossa, verde e blu. La notazione hex scrive questi tre canali come un codice di sei caratteri, ad esempio #2563eb, dove ogni coppia di caratteri è un canale da 00 a ff. Il RGB scrive gli stessi tre numeri in decimale, da 0 a 255, più facile da leggere ma senza aggiungere nulla. Il HSL adotta un approccio diverso: descrive un colore tramite la sua tinta (una posizione sulla ruota cromatica da 0 a 360 gradi), la sua saturazione (quanto è vivido) e la sua luminosità (quanto è vicino al bianco o al nero). Il HSL è il formato a cui i designer ricorrono quando vogliono ritoccare un colore, perché aumentare la luminosità o spostare la tinta è un'unica modifica intuitiva anziché tre numeri collegati. Un convertitore consente di passare tra tutti e tre, così puoi leggere un valore in un formato e usarlo in un altro.
Trasformare un colore in una palette
Un singolo colore di marca raramente basta. Una palette funzionante di solito ha bisogno di un colore primario, di uno o due accenti e di un insieme di grigi neutri per il testo e gli sfondi. Le relazioni tra i colori seguono regole semplici sulla ruota cromatica: i colori complementari si trovano l'uno di fronte all'altro, i colori analoghi stanno vicini per un effetto rilassante e una terna triadica distribuisce tre colori in modo uniforme per ottenere contrasto senza stonature. Uno strumento per gli schemi di colore applica queste regole al tuo colore di partenza e ti fornisce i codici hex corrispondenti, così non devi calcolare gli angoli a mano. Se hai già un'immagine la cui atmosfera ti piace, un estrattore di palette ne legge i colori dominanti, un modo rapido per basare un sito su una foto o su un logo.
Contrasto e daltonismo
Una palette che appare bene sul tuo schermo può comunque non funzionare per alcuni lettori. Circa un uomo su dodici e una donna su duecento presentano una qualche forma di deficit della visione dei colori, più spesso la difficoltà a distinguere il rosso dal verde. Se l'unico segnale di un errore è un testo rosso su un pulsante verde, quei lettori non lo notano. La soluzione non è evitare il colore ma non affidarsi mai solo a esso: abbinalo a un'icona, a un'etichetta o a una forma e mantieni un contrasto di luminosità sufficiente tra il testo e il suo sfondo. Un simulatore di daltonismo ti mostra come appare la tua palette nei tipi comuni di visione dei colori, così puoi cogliere un problema prima della pubblicazione anziché dopo una lamentela.
Fare tutto questo nel browser
Nessuno di questi passaggi richiede un server. Convertire un codice hex, generare uno schema, leggere i colori da un'immagine e simulare il daltonismo sono tutti piccoli calcoli che un browser gestisce all'istante. Questo conta quando l'immagine che stai campionando è un design non ancora pubblicato o il logo di un cliente: con gli strumenti qui presenti, il file resta sul tuo dispositivo e nulla viene inviato. Ottieni lo stesso risultato che avresti da un servizio online, senza consegnare il materiale grafico. Il convertitore di colori, il generatore di schemi di colore, l'estrattore di palette e il simulatore di daltonismo funzionano tutti in locale e allo stesso modo offline una volta caricata la pagina.
OKLCH e gli spazi colore più ampi
Hex, RGB e HSL descrivono tutti colori all'interno del gamut sRGB che gli schermi usano da anni. I display più recenti mostrano di più, e i CSS possono ora raggiungerli con la funzione color() e lo spazio Display P3, che aggiunge verdi e rossi vivaci che sRGB non riesce a rappresentare. Il cambiamento più rilevante è OKLCH, un modo di scrivere il colore come luminosità, croma e tonalità che rispecchia la percezione reale della luminosità da parte dell'occhio. In HSL un giallo e un blu alla stessa luminosità del 50% appaiono completamente diversi: il giallo risulta chiaro, il blu risulta scuro. In OKLCH, tenere fissa la luminosità e cambiare solo la tonalità mantiene stabile la luminosità percepita. Questo rende pratico costruire una palette in cui ogni sfumatura raggiunge lo stesso obiettivo di contrasto bloccando un solo valore, invece di regolare a mano ogni singolo colore.
Strumenti citati in questo articolo
- Convertitore coloriConverti i colori tra HEX, RGB, HSL, HSV e CMYK. Verifica del contrasto WCAG inclusa. Nessun upload.
- Generatore palette coloriGenera palette complementari, analoghe, triadiche, tetradiche e monocromatiche da un colore base. Nessun upload.
- Estrattore palette coloriEstrai i colori dominanti da un'immagine come campioni HEX. Copia qualsiasi colore. Nessun upload.
- Simulatore daltonismoSimula protanopia, deuteranopia, tritanopia e acromatopsia su un'immagine. Nessun upload.
Domande frequenti
Qual è la differenza tra hex e RGB?
Sono due modi di scrivere lo stesso colore. L'hex racchiude i canali rosso, verde e blu in un codice di sei caratteri in base 16, mentre il RGB elenca gli stessi tre canali come numeri decimali da 0 a 255. #ff0000 e rgb(255, 0, 0) sono lo stesso identico rosso. L'hex è compatto e diffuso nel CSS e nei file di design, il RGB si legge più facilmente a colpo d'occhio e passare dall'uno all'altro non cambia nulla del colore stesso.
Come faccio a sapere se i miei colori sono leggibili per gli utenti daltonici?
Passa la tua palette attraverso un simulatore di daltonismo, che ridisegna i tuoi colori come li vedrebbe una persona con ciascun tipo comune di visione dei colori. Fai attenzione alle coppie che collassano nella stessa tonalità, in particolare i rossi e i verdi. L'abitudine più sicura è non usare mai il colore come unico segnale: sostienilo con un testo, un'icona o un motivo e mantieni una differenza di luminosità netta tra primo piano e sfondo, così il significato sopravvive anche quando la tinta non lo fa.