Selettore colori: ricava il codice esatto di un colore da un’immagine o dallo schermo

Come usare il selettore colori

1. Carica un’immagine. Trascina un file, sceglilo oppure incolla uno screenshot dagli appunti. PNG, JPEG, WebP, GIF, AVIF, BMP e SVG fino a 40 MB funzionano ovunque; HEIC solo dove il browser sa aprirlo, e un file che non riesce ad aprire riceve un messaggio chiaro invece di una schermata vuota. Lo strumento campiona la bitmap a piena risoluzione, non la copia ridimensionata che vedi sullo schermo. Solo le immagini oltre 16,7 megapixel vengono lette da una copia ridotta, e lo strumento te lo dice. Elenca inoltre i colori dominanti dell’immagine con la loro quota.
2. Mira con la lente. L’ingranditore mostra la griglia di pixel attorno al puntatore del mouse o al dito, così vedi se sei su una zona uniforme o su un bordo con antialiasing. Da tastiera, i tasti freccia spostano il punto di prelievo di un pixel (Maiusc: dieci) e Invio lo preleva.
3. Scegli la dimensione del campione. 1 pixel dà il valore grezzo; una media 3×3 o 5×5 attenua il rumore JPEG e la grana delle foto. Io uso 1 pixel per loghi e interfacce, una media per le foto.
4. Oppure preleva dallo schermo. Nei browser Chromium su computer (Chrome, Edge, Opera) il pulsante del contagocce ti lascia cliccare qualsiasi pixel del display, anche fuori dalla finestra del browser. Firefox e Safari non hanno questa funzione; lo strumento te lo dice e ti indica la strada dell’immagine.
5. Oppure scrivi un codice. Incolla #1d4ed8 (3, 4, 6 o 8 cifre), rgb(29 78 216), hsl(224 76% 48%), un valore hsv(), oklch() o cmyk(), oppure un nome di colore CSS, e tutti gli altri formati si aggiornano. Un interruttore passa l’output dalla sintassi CSS moderna, con gli spazi, a quella legacy con le virgole.
6. Raccogli ed esporta. Aggiungi i prelievi alla palette, che viene salvata nel tuo browser, e copiala o scaricala come proprietà personalizzate CSS, SCSS, JSON o semplice elenco HEX.

HEX, RGB, HSL, HSV e OKLCH: quale codice usare

OKLCH nasce dal CSS Color Module Level 4 ed è la forma cilindrica dello spazio Oklab. Il suo asse L è costruito per seguire quanto un colore appare luminoso, ed è proprio ciò che la luminosità di HSL sbaglia. Il giallo puro e il blu puro hanno entrambi L 50% in HSL, eppure uno è quasi bianco all’occhio e l’altro è scuro:

Per questo costruisco ogni scala di sfumature in OKLCH: passi uguali di L sembrano passi uguali, su tutte le tinte, e il contrasto del testo diventa molto più prevedibile.

Esempio svolto: conversione di #1D4ED8

Da HEX a RGB. Dividi in coppie e leggi ciascuna in base 16:

Da RGB a HSL. Porta i canali su una scala 0–1: R = 0,1137, G = 0,3059, B = 0,8471. Max = 0,8471 (blu), min = 0,1137, differenza d = 0,7333.

Da RGB a HSV. V = max = 84,7%; S = d / max = 0,7333 / 0,8471 = 86,6%; la tinta è la stessa, 224,3°, quindi hsv(224.3 86.6% 84.7%).

Da RGB a CMYK. K = 1 − max(R, G, B) = 1 − 0,8471 = 15,3%; poi C = (1 − R − K) / (1 − K) = 86,6%, M = 63,9%, Y = 0%, mostrato come cmyk(87% 64% 0% 15%). È pura aritmetica, non un profilo di inchiostri.

Da RGB a OKLCH. Ogni canale viene linearizzato (annullando la gamma sRGB), convertito in Oklab con due matrici fisse e una radice cubica in mezzo, poi a e b diventano croma e tinta. Il risultato è oklch(48.82% 0.2172 264.38), che il CSS accetta anche come oklch(0.4882 0.2172 264.38). La tinta OKLCH (264°) differisce da quella HSL (224°) perché le ruote delle tinte sono costruite in modo diverso.

Perché un colore prelevato può scostarsi di qualche unità

Due persone che prelevano lo stesso colore del brand possono ottenere #1D4ED8 e #1E4FD6 senza che nessuno strumento sbagli:

• La compressione JPEG memorizza il colore a risoluzione ridotta e in blocchi 8×8, quindi i pixel vicini in una zona uniforme oscillano di qualche unità. Se nove valori di rosso leggono 27, 29, 31, 28, 30, 29, 26, 32, 29, la loro media è 261 ÷ 9 = 29, il valore che con ogni probabilità ha usato il designer.
• Gli screenshot ridimensionati fondono i pixel. Uno screenshot Retina ridotto a metà mescola ogni blocco 2×2, così testo sottile e bordi diventano colori intermedi.
• L’antialiasing su bordi e caratteri crea pixel di transizione che non appartengono a nessuno dei due colori. Preleva dal centro di una campitura uniforme, mai dal bordo.
• Il contagocce dello schermo restituisce ciò che è visualizzato, dopo la gestione del colore e funzioni come Night Shift o True Tone, e riporta un HEX sRGB. Il valore nel file può essere diverso; per valori esatti, preleva dall’immagine stessa.

Trasparenza. In #1D4ED880 l’ultima coppia è l’alfa: 80 esadecimale = 128, e 128 ÷ 255 = 0,502, quindi circa il 50% di opacità. In CSS l’alfa è in fondo; l’ARGB di Android lo mette all’inizio, un errore frequente. Quello che vedi dipende dallo sfondo: su bianco ogni canale diventa 0,502 × colore + 0,498 × 255, ottenendo circa #8EA6EB. Lo strumento conserva l’alfa di PNG, WebP e altri formati che ce l’hanno e ti avvisa quando il pixel prelevato non è completamente opaco. Un pixel del tutto trasparente viene segnalato come trasparente invece di essere scambiato per nero, e le medie sono pesate sull’alfa, così i pixel semitrasparenti non trascinano il risultato verso il nero.

Sfumature, schiariture e palette

Classicamente una schiaritura è un colore mescolato con il bianco, uno scurimento con il nero e un tono con il grigio. Mescolare in RGB dà passi irregolari, quindi la scala qui mantiene tinta e croma in OKLCH e sposta la luminosità in dieci passi uguali da L 96% a 24%, riducendo il croma solo dove un colore uscirebbe dalla gamma sRGB; il passo più vicino al tuo colore è evidenziato. Le righe di schiariture, scurimenti e toni sono semplici miscele sRGB con bianco, nero e grigio medio a passi del 10%, comode per gli stati hover e disabilitato. Puoi copiare la scala come variabili CSS oppure proseguire direttamente nel CSS con la sintassi del colore relativo, ad esempio oklch(from var(--brand) calc(l + 0.15) c h).

Per ogni colore lo strumento indica anche il più vicino tra i 148 nomi di colore CSS, tutti sRGB, misurando la distanza in OKLab, e ti dice se la corrispondenza è esatta (#663399 è esattamente rebeccapurple, #808080 è gray, scritto anche grey) o solo la più vicina (#1D4ED8 è più vicino a royalblue).

Le sei armonie di colore si costruiscono ruotando la tinta: complementare, analoga, triadica, complementare divisa, tetradica e quadrata. La tetradica qui è il rettangolo (+60°, +180°, +240°), che non è il quadrato (+90°, +180°, +270°). Per #1D4ED8 il complementare è #D8A71D, il secondo colore tetradico è #A71DD8 e il secondo colore del quadrato è #D81DAC. Ogni gruppo si copia come variabili CSS.

Verificare il contrasto secondo le WCAG

Il rapporto di contrasto WCAG è (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 di quello più scuro. La luminanza è 0,2126 R + 0,7152 G + 0,0722 B sui canali sRGB linearizzati, ed è per questo che il verde conta dieci volte il blu.

• AA: 4,5:1 per il testo normale, 3:1 per il testo grande (almeno 18 pt, o 14 pt in grassetto).
• AAA: 7:1 per il testo normale, 4,5:1 per il testo grande.
• Contrasto dei non testuali per icone, bordi dei campi e anelli di focus: 3:1.

Le WCAG dicono che il rapporto calcolato non va arrotondato, quindi 4,499:1 non supera 4,5:1. Il caso classico sono due grigi vicini su bianco. Per #767676: 76 esadecimale = 118, 118 ÷ 255 = 0,4627, linearizzato ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812, rapporto 1,05 / 0,2312 = 4,54:1. Per #777777: valore lineare 0,1845, rapporto 1,05 / 0,2345 = 4,48:1.

La verifica nello strumento usa esattamente questa formula. Mostra il rapporto, cinque badge di superato o non superato (AA e AAA per testo normale e grande, più 3:1 per elementi dell’interfaccia e icone), un indicatore e un’anteprima dal vivo. Il rapporto ha due decimali, ma quando l’arrotondamento supererebbe una soglia ne mostra tre, quindi #007BC8 su bianco legge 4,499:1 e non supera, invece di mostrare un fuorviante 4,50. Il testo semitrasparente viene miscelato con lo sfondo prima della misura. Quando una coppia non supera AA, lo strumento suggerisce il colore più vicino che la supera: mantiene tinta e croma OKLCH e sposta solo la luminosità, così #777777 su bianco diventa #767676.

Il nostro blu di esempio #1D4ED8 su bianco dà 6,70:1: va bene per il testo del corpo a livello AA, non arriva ad AAA. Nel mio lavoro punto a 4,5:1 su tutto il testo, anche sui titoli grandi, perché il margine copre gli schermi economici e le stanze molto luminose.

Come funziona il selettore colori e come viene verificato

Le immagini vengono decodificate in un canvas sul tuo dispositivo e lette pixel per pixel; nulla viene inviato a un server, e la palette (fino a 48 colori) vive solo nel tuo browser. Il contagocce dello schermo usa la EyeDropper API, che richiede una pagina sicura (HTTPS) e un clic per partire, e funziona solo nei browser basati su Chromium; in Firefox e Safari passa dall’immagine. Le conversioni seguono le formule di CSS Color 4 per sRGB, HSL, HSV e OKLCH. I valori vengono arrotondati solo per la visualizzazione (HSL e HSV a un decimale; luminosità OKLCH in percentuale con due decimali, croma a quattro e tinta a due); il superamento o meno del contrasto si decide sul rapporto non arrotondato. Il CMYK usa la semplice formula K = 1 − max(R, G, B) senza profilo ICC, quindi consideralo approssimativo.

Approfondisci

• Come prelevare un colore da un’immagine
• HEX, RGB, HSL e OKLCH spiegati
• Contrasto dei colori per l’accessibilità