Come trovare i codici dei colori

Come catturare il codice di un colore cliccandoci sopra con un programma gratuito senza installazione per Windows e per Mac che serve anche per convertire i codici HTML, RGB, HEX, HSB / HSV, HSL

L'esigenza di rappresentare i colori in modo sistematico si è avuta ben prima dell'avvento dell'informatica. Già l'industria tipografica aveva creato un modello con cui rappresentare tutti i colori. Tale modello fu chiamato RGB (Red, Green, Blue) che partiva da questi tre colori primari per creare tutti gli altri, mischiandoli in proporzioni variabili. Oltre al Rosso, Verde e Blu del modello RGB è stato proposto, dai produttori di stampanti, il modello CMYK che è l'acronimo di Cyan, Magenta, Yellow, Key black, cioè dei colori Ciano, Magenta, Giallo mentre Key black si riferisce a una particolare tecnologia dei sistemi di stampa.

Altri sistemi di rappresentazione dei colori sono HSB/HSL (Hue Saturation Brightness ovvero Tonalità Saturazione Luminosità) e HSV (Hue Saturation Value ovvero Tonalità, Saturazione e Valore). Per individuare un colore occorre quindi scegliere il modello e indicare il valore, ovvero la quantità di colori primari per ciascuno di essi. Agli albori di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4bit. Successivamente la rappresentazione dei colori utilizzò gli 8bit con 256 colori riproducibili dai browser, che aumentarono a più di 65.000 con i 16 bit.

La prima rivoluzione arrivò con i 24 bit e con i tre colori primari Red, Green e Blue. Si avevano quindi 8 bit per ciascun colore con un numero complessivo di 2⁸=256 possibili valori per il Rosso, Verde e Blu. Le combinazioni di colore realizzabili diventarono quindi 256³= 16.777.216. Con più di 16 milioni di colori si potevano già creare  più sfumature di quelle che l'occhio umano  riesce a percepire.

La seconda rivoluzione arrivò con i colori a 32bit. Oltre ai tre colori primari da 8 bit ciascuno, fu introdotto anche il cosiddetto Canale Alfa che imposta il grado di trasparenza o opacità. Non è obbligatorio usare il Canale Alfa che esiste solo nei formati di immagine PNG, GIF e TIFF, mentre non è presente nelle immagini JPG.

I più comuni programmi di grafica hanno dei tool che ci permettono di trovare il codice di un colore di un dato pixel di una immagine. Su Photoshop si chiama Strumento Contagocce mentre su Gimp si chiama Prelievo Colore.  Dopo aver aperto una immagine, si seleziona lo strumento in oggetto e si clicca nel punto della immagine di cui si vuole trovare il codice del colore. Come fare però per trovare il codice di un colore presente in una pagina web, o comunque visibile sullo schermo del computer, senza usare Photoshop, Gimp, Paint.NET, ecc?

Ci sono molti programmini gratuiti che funzionano come lo Strumento Contagocce di Photoshop. Tra i molti che ho sperimentato, la mia scelta è caduta su Just Color Picker. Si tratta di un software gratuito per Windows e per Mac che è pure portatile. Gli utenti di Windows debbono scorrere la pagina fino a trovare il link Download free Just Color Picker 5.1 for Windows (EXE, 32 & 64 bit, portable, size 2.1MB).

Verrà scaricato un file che non ha bisogno di installazione. Facendoci sopra un doppio click, verrà aperta una finestra che ci permetterà di estrarre i codici dei colori da qualsiasi finestra aperta nello schermo del computer. Ho pubblicato sul mio Canale Youtube il video tutorial su come usare questo semplice strumento.

Si fa un doppio click sul file jcpicker.exe per aprire la finestra del programma. Ci sarà una interazione con la posizione del puntatore del cursore. Verrà mostrata nella finestrella in alto a sinistra il colore del pixel su cui è posizionato il cursore e, sotto di esso, il suo codice colore.

Cambiando la posizione del mouse, verranno mostrati i codici dei colori dei pixel che via via punterà il cursore. Nel mezzo dell'interfaccia di Just Color Picker c'è anche una finestra di zoom per facilitare l'estrazione del colore.

I numeri sotto al codice indicheranno la posizione del puntatore nello schermo a partire da (0,0) dell'angolo in alto a sinistra. In uno schermo con risoluzione 1920x1080 pixel saranno questi i numeri mostrati, se con il cursore puntassimo il punto dello schermo posto in basso a destra. Per catturare e prendere nota di un colore, si digita la scorciatoia da tastiera Alt+X. I colori così catturati verranno mostrati nella finestra posta in alto a destra.

In alcuni menù, quando ci si passa sopra con il cursore, si assiste a un effetto hover, che cambia il colore dell'elemento. In questi casi si può usare la scorciatoia da tastiera Shift+Ctrl+Z per bloccare lo schermo.

Lo schermo si sbloccherà dopo che si sia digitato Alt+X per selezionare il colore o dopo che si sia ripetuta la stessa combinazione di tasti di scelta rapida Ctrl+Shift+Z. Nel menù posto sulla sinistra si potrà scegliere il modello del codice di colore tra quelli supportati (HTML, HEX, RGB, ecc...).

Questo tool può essere usato anche per la conversione di un codice colore in un altro. Si seleziona nel menù il modello di codice del colore di partenza, quindi lo si digita nel campo sotto allo zoom e si va su Invio. Verrà mostrato il colore corrispondente e, in basso si potrà mettere la spunta sugli altri modelli per avere la conversione.

Just Color Picker permette anche di misurare le distanza tra due punti dello schermo. Si posiziona il puntatore del mouse nel punto iniziale quindi si digita Alt+X. Verrà estratto il colore corrispondente e verrà presa nota della posizione del relativo pixel. Si sposta poi il cursore nel secondo punto e si torna su Alt+X.

Verrà estratto il colore del secondo punto e ne verranno prese le coordinate. La differenza tra ascisse e ordinate degli ultimi due punti selezionati verrà mostrata sotto a quella della posizione corrente. Si può catturare un solo pixel oppure fare una media tra i colori posti in una area di 3, 5 o 7 pixel di lato. Lo si fa impostando questa scelta su Opzioni -> Area di cattura colore. In Strumenti -> Testo si può visualizzare l'anteprima di un testo dell'ultimo colore selezionato posto in uno sfondo del penultimo colore. Si possono anche selezionare colori diversi.

In Elenco colori -> Pulisci tutto si possono eliminare i datti di tutte le catture effettuate mentre andando su Elenco Colori -> Salva con nome si possono salvare in un file di testo i codici dei colori catturati. La parte bassa della interfaccia mostra le combinazioni di colori più armoniche rispetto ai colori selezionati. Tale sezione può essere opzionalmente nascosta se non interessa. Se si clicca su Copia Valore, verrà copiato negli Appunti il codice del colore selezionato. Infine, nella parte bassa della interfaccia viene mostrata anche una barra colorata con il gradiente tra due colori selezionati per selezionare una tonalità intermedia.

Ecco un riassunto delle principali funzionalità di Just Color Picker:

1. Supporta i modelli di colore HTML, RGB, HEX, HSB / HSV, HSL, HWB, CMYK e Delphi
2. Funzione di zoom con ingrandimento di 3x, 9x e 15x
3. Blocco schermo per il campionamento del colore degli elementi che lo cambiano al passaggio del mouse
4. Calcolo della distanza dei pixel tra i punti
5. Elenco colori per il salvataggio e il riutilizzo dei campioni di colore selezionati
6. Conversione di codici colore HTML, esadecimali e RGB nei colori corrispondenti
7. Ruote dei colori rosso-verde-blu (RGB), ciano-magenta-giallo (CMY) e rosso-giallo-blu (RYB) con triadi e colori complementari (apri link a fondo pagina per saperne di più).
8. Generatore di schemi di colori armoniosi
9. Editor di colori RGB, HSV e HSL per la regolazione e la modifica dei colori
10. Transizione gradiente tra due colori per la creazione di una gamma di tonalità intermedie
11. Strumento di testo per valutare la leggibilità del font selezionato su un dato sfondo
12. Tasti di scelta rapida scelti dall'utente
13. Funziona di copia del codice dei colori negli Appunti
14. Salvataggio dei codici dei colori selezionati
15. Codici di colori nella notazione usata nel linguaggio CSS
16. Non necessita di installazione. Il programma può essere lanciato anche da una chiavetta USB
17. Interfaccia multilingue che rileva automaticamente l'italiano.

Per approfondire i tempi dei puntoi7) e 8) vi consiglio di leggere la recensione della app gratuita Adobe Color CC.