Perché ho creato questo color picker per immagini

Le due cose che valeva la pena sistemare

Di selettori di colore da immagine ce ne sono parecchi. La maggior parte, però, ha uno di due difetti fastidiosi.

Il primo è che caricano il tuo file. Trascini su un sito lo screenshot di una pagina non ancora pubblicata e il file viaggia fino al server di qualcun altro, perché uno script legga un solo pixel: un lavoro che il tuo browser sa fare dal 2010. Il file viene letto, forse conservato, forse registrato, e non hai modo di sapere cosa ne succede.

Il secondo è che si fermano al codice HEX. Volevi quel colore per usarlo: metterlo in un foglio di stile, costruirci attorno una scala, controllare se un testo bianco sopra quel colore resta leggibile. Uno strumento che ti dà #3F51B5 e un pulsante Copia ha fatto la parte facile e ti ha lasciato tutto il resto.

Questo strumento evita entrambe le cose. Il sito è fatto di pagine statiche e di un piccolo script che legge i pixel da un canvas nella tua scheda, quindi non esiste un server su cui caricare qualcosa. Un clic ti dà nove codici colore, una palette di otto colori con la percentuale che ognuno occupa, sei armonie, una scala da 50 a 950, i risultati di contrasto WCAG e un'anteprima della visione dei colori.

Chi lo sviluppa

Sono Md. Delwar Hossen. Costruisco applicazioni web da più di otto anni, per buona parte su strumenti di produttività in una società di consulenza software. Oggi sono direttore dei sistemi web e digitali in un'azienda statunitense e lavoro da remoto. Mi trovi su LinkedIn.

Ho creato questo strumento perché continuavo ad averne bisogno. Il mio lavoro più frequente era ricostruire un'interfaccia da uno screenshot senza file di design, e ogni strumento che provavo o caricava lo screenshot su un server o si fermava a un codice esadecimale. La guida pratica porta il mio nome per lo stesso motivo di questa pagina: se un numero qui è sbagliato, sai a chi dirlo.

Com'è costruito

Astro e Tailwind CSS, senza framework di interfaccia. Lo strumento è TypeScript ordinario che pilota due canvas.

Usare due canvas invece di uno è la scelta su cui si regge tutta la precisione. Il primo è quello che vedi: scalato, spostato, ingrandito, ridisegnato a ogni tuo movimento. Il secondo tiene l'immagine alla dimensione originale, non viene mai scalato ed è l'unico che venga misurato. È questa separazione a rendere un colore prelevato a 12× identico allo stesso colore prelevato in vista adattata, e c'è un test end-to-end apposta, perché è il tipo di cosa che si rompe senza che nessuno se ne accorga.

Tutti i calcoli sul colore stanno in una sola cartella, senza dipendenze a runtime. Le conversioni sono reversibili per ogni terna sRGB a 8 bit, uno spazio abbastanza piccolo da controllare per intero invece che a campione. Le rotazioni di tonalità e le scale di luminosità sono calcolate in OKLCH invece che in HSL, perché HSL non è percettivamente uniforme: una scala costruita in HSL sembra regolare nei numeri e irregolare all'occhio, con i gialli che si slavano mentre i blu restano pesanti.

Come vengono verificate le affermazioni di questo sito

I numeri sulla precisione di questo sito sono prodotti da script. Ecco come viene verificato ogni tipo di affermazione.

• I calcoli sul colore hanno la loro suite di test unitari. Le conversioni fanno andata e ritorno, l'implementazione di CIEDE2000 è verificata contro coppie note, e le affermazioni sulla visione dei colori sono controllate su tutto il cubo RGB invece di essere date per scontate.
• La promessa sulla privacy è testata. Uno script end-to-end carica lo strumento vero in Chromium headless, preleva colori e fallisce se una richiesta esce dalla pagina.
• I numeri sulla precisione vengono da uno script. Ogni valore di deriva nella guida pratica è prodotto da uno script che gira in un browser vero, quindi la codifica e la decodifica JPEG sono quelle del browser stesso. Misura ogni scarto con lo stesso codice delta-E che usa lo strumento. La palette della home page nasce allo stesso modo: lo script esegue il codice di palette dello strumento sulla foto di esempio inclusa.
• I consigli superati vengono intercettati. Se una nuova misura contraddice il consiglio scritto attorno, il controllo fallisce finché il consiglio non viene riscritto.

Ogni valore misurato nella guida pratica riporta la data e il browser della misura.

Cosa volutamente non fa

Questi sono i limiti noti dello strumento.

• Il contagocce di sistema usa un'API che per ora esiste solo in Chromium. In Firefox e Safari il pulsante è nascosto, invece di comparire senza funzionare.
• Non c'è nessuna esportazione in PNG, JPEG o campioni Adobe. Il foglio di campioni SVG è la cosa più vicina a un'immagine condivisibile di una palette.
• La gestione del colore non viene applicata. Ottieni i byte sRGB che il browser visualizzerebbe: è la risposta giusta per il web, ma non se stai facendo una prova colore su un monitor calibrato.
• Non è un'applicazione offline installabile. Una volta caricata, la pagina non ha più bisogno della rete, ma non c'è un service worker: un avvio a freddo senza connessione non funzionerà.

Correzioni

Se qualcosa qui è sbagliato, preferisco correggerlo piuttosto che difenderlo. Scrivi a info@exacthex.com, o passa dalla pagina dei contatti, che spiega cosa includere perché un problema di colore sia riproducibile. Le correzioni ai valori misurati sono particolarmente gradite: sono le affermazioni che sarebbe più imbarazzante sbagliare.