Come usare il convertitore di colori
Quando costruite una pagina web, scrivete CSS o lavorate da un file di design, convertire tra formati di colore è una seccatura costante. Il software di grafica vi dà l'HEX; in CSS magari volete l'HSL per schiarire o scurire facilmente; la stampa richiede il CMYK; e i framework frontend preferiscono le variabili in RGB. Farlo a mano è lento e soggetto a errori, quindi questo strumento raccoglie tutti i formati comuni in un'unica pagina: cambiatene uno e gli altri seguono.
Cosa sono i cinque formati
- HEX (esadecimale): la notazione più universale nel web e negli strumenti di design, scritta come
#3b82f6. Due caratteri per colore, nell'ordine rosso, verde, blu, ciascuno da 00 a ff. Prima scelta per il CSS. - RGB (rosso verde blu): scompone il colore in tre valori di canale da 0 a 255, rispecchiando come uno schermo emette luce. Il CSS accetta anche
rgb(59, 130, 246). - HSL (tonalità / saturazione / luminosità): la tonalità è un angolo sul cerchio cromatico da 0 a 360, la saturazione è la vivacità da 0 a 100%, la luminosità da 0 a 100%. Per «rendere questo blu più scuro ma mantenere la tonalità», HSL è il più semplice: basta cambiare la luminosità.
- HSV / HSB (tonalità / saturazione / brillantezza): simile nello spirito a HSL ma con una definizione diversa di brillantezza. È l'«HSB» che vedete in strumenti di design come Photoshop e Sketch.
- CMYK (ciano / magenta / giallo / nero): il modello sottrattivo della stampa. Un RGB emissivo non si può stampare; una tipografia vuole il CMYK. Notate che i valori qui sono una conversione per formula — la stampa reale dipende anche da carta e inchiostro, quindi considerateli indicativi.
Alcune trappole in cui si cade
Una luminosità HSL del 50% non significa «normale». Molti pensano che impostare la luminosità al 50% restituisca il colore originale, ma in HSL L=50% è semplicemente il punto più vivido per quella tonalità. Il rosso puro #ff0000 è hsl(0, 100%, 50%), mentre il bianco puro è hsl(0, 0%, 100%). Per generare una scala dal chiaro allo scuro entro una stessa tonalità, variare L è la leva più efficace.
Il ritorno da CMYK a RGB introduce derive. Il CMYK è sottrattivo a quattro canali, l'RGB additivo a tre canali, e i loro gamut non coincidono. Colori CMYK come il ciano puro e il magenta puro non si possono proprio mostrare a schermo, e allo stesso modo un verde molto saturo a schermo non si può stampare. Per il design prendete come sorgente la versione a schermo e fate confermare alla tipografia lo scostamento di colore prima di consegnare.
L'HEX breve ha una condizione. #fff è la forma abbreviata di #ffffff e funziona solo quando ogni coppia di caratteri è raddoppiata. #3b82f6 non si può ridurre a tre cifre.
Non dimenticate l'alpha. L'HEX si può scrivere a otto cifre (come #3b82f680), dove le ultime due sono il canale alpha; in CSS è rgba(59,130,246,0.5). Questo strumento lavora con HEX a sei cifre senza trasparenza; l'opacità va indicata a parte.
Perché il contrasto conta
WCAG (le Linee guida per l'accessibilità dei contenuti web) fissa requisiti chiari sul contrasto del testo: il testo normale dovrebbe raggiungere almeno 4,5:1, e il testo grande (da 18pt in su, o 14pt in grassetto) almeno 3:1. Un contrasto insufficiente rende i contenuti illeggibili per chi ha ipovisione o per chiunque guardi il telefono sotto la luce diretta del sole, e danneggia anche il punteggio di accessibilità della pagina e il rendimento sui motori di ricerca. Questo strumento calcola il contrasto tra colore di primo piano e di sfondo e vi dice se è conforme.
Domande frequenti
Perché le percentuali CMYK non sommano al 100%?
In teoria i quattro canali dovrebbero sommare a circa il 100% (è un modello sottrattivo: quattro inchiostri sovrapposti assorbono tutta la luce e danno il nero), ma in pratica il totale risulta sopra o sotto. Una ragione è che gli inchiostri reali non sono puri; un'altra è che il settore usa algoritmi come GCR/UCR (sostituzione della componente grigia) per ottimizzare la lastra nera, risparmiando inchiostro e migliorando la qualità di stampa. Questo strumento fornisce la conversione pura per formula, senza quegli aggiustamenti di processo.
Qual è esattamente la differenza tra HSL e HSV?
La differenza chiave sta nella definizione di «luminosità» e «brillantezza». In HSL, L va dal nero (0%) attraverso il colore saturo (50%) fino al bianco (100%); in HSV, V va dal nero (0%) direttamente al colore più vivo (100%), senza il tratto «verso il bianco». Quindi lo stesso colore ottiene numeri diversi nei due modelli: verificate quale usa il vostro software. Il H, S e B nel selettore colori di Photoshop sono HSV.
Come viene generata la scala cromatica?
Lo strumento percorre uniformemente la luminosità dal 95% al 5% nel modello HSL, mantenendo costanti tonalità e saturazione, poi riconverte in HEX. Il risultato è una scala entro una stessa tonalità dal chiaro allo scuro, adatta agli stati hover dei pulsanti, agli sfondi stratificati delle card e ai gradienti dei grafici. Se il vostro colore di base ha una saturazione molto bassa (quasi grigio), i passi saranno meno evidenti.
Cosa significa un rapporto di contrasto di 21:1?
È il massimo teorico, ottenuto con nero puro su bianco puro (#000000 su #ffffff). Si calcola come rapporto tra luminanze relative: (più chiaro + 0,05) / (più scuro + 0,05). Più alto è il rapporto, più forte è il contrasto. Per il lavoro web quotidiano puntate a 7:1 o meglio sul testo corrente e almeno 4,5:1 sul testo dei pulsanti.
#0000ff è diverso da #0000FF?
No — i codici colore HEX non distinguono maiuscole e minuscole. È solo che i team di solito concordano sulle minuscole per far contenti i linter di stile.