Selezionare e Trovare i codici colori di siti web e immagini

Migliori siti e strumenti (Color Picker) per estrarre i codici dei colori e trovarli da qualsiasi immagine o parte dello schermo

Quando si fa un lavoro di grafica sul computer, qualunque programma si utilizzi, si devono scegliere i colori. La scelta dei colori giusti è molto importante sia per distinguere un bel lavoro da uno non buono sia per rendere leggibile a tutti il contenuto del proprio progetto di grafica. Per progetto di grafica si intende qualsiasi cosa abbia a che fare con la creazione di figure e immagini sul computer quindi anche la creazione di una presentazione in Powerpoint e il disegno di un sito web, il fotoritocco di una immagine oppure anche nella banale scelta del colore del carattere di scrittura su un documento, una tabella o semplicemente, per uno sfondo.

Molto spesso, nella scelta dei colori, si cerca di prendere spunto da immagini o siti internet e se uno schema di colori è fatto bene non c'è alcun copyright che impedisce di copiarlo.

LEGGI ANCHE: Come modificare ogni sito o pagina web, testo, grafica e colori

Su un computer però i colori possibili sono tantissimi e sono organizzati in modi diversi a seconda dell'applicazione che si utilizza. Su Windows e su tanti programmi di vario tipo, ad esempio, si scelgono i colori con un pannello guidato dove con la freccia si sceglie il colore base e la sfumatura. Ad esempio, basta andare sulle proprietà del desktop, nella scelta dello sfondo e provare a impostare un colore fisso; prima appaiono alcuni colori standard, poi, si può premere su "altri colori" per accedere alla finestra di scelta di tutta la gamma. In questo caso i colori si differenziano per il codice RGB, ossia delle coordinate della tabella dei colori primari che sono il verde, il blu e il rosso.

Sui siti web, nel linguaggio html, i colori sono indicati con un codice esadecimale del tipo #6A6965 per la cui origine e spiegazione rimando a una trattazione specifica.

Lo scopo di questa pagina è prendere nota di alcuni programmi utili ad estrarre questi colori da qualsiasi cosa appaia sul monitor del pc, in modo da riprendere lo stesso identico ed usarlo sul proprio sito internet, su una presentazione grafica o su qualsiasi programma di disegno.

1) Il tool più semplice che cattura i colori dallo schermo e consente di leggere il codice in modo da riutilizzarlo, è ColorPix. Si tratta di un piccolo programma portable, senza installazione, che dice i codici RGB e quello esadecimale del colore su cui si ferma la freccia del mouse. Per estrarre il colore da un altro sito o una immagine nella sua più precisa sfumatura, si usa la freccia del mouse con ColorPix aperto per leggere quale codice si deve digitare per riusarlo. Con l'opzione magnifier è possibile ingrandire una piccola porzione dello schermo per raccogliere il dettaglio preciso. Ogni colore viene tradotto in modo automatico nel suo codice RGB, HEX, HSB e CMYK.

2) Just Color Picker è un'applicazione più moderna che aiuta a catturare i colori dallo schermo e poi generare uno schema di colori da utilizzare. La prima casella (nell'angolo in alto a sinistra) del programma mostra il colore dell'elemento sotto il puntatore. I codici colore sono elencati appena sotto questa casella ed è possibile scegliere tra codice HTML, RGB, HEX, HSB / HSV, HSL (HSL, 255 e 240), HWB, CMY, CMYK e Delphi. Premendo insieme i tasti Alt - X si ferma il colore selezionato sul puntatore e si può salvare il codice da usare su un sito web. La sezione Text del menu Strumenti consente di selezionare il tipo di carattere, la dimensione, il colore del testo e il colore di sfondo per vedere come appare in anteprima.

2) Color detector è un programma simile al precedente in cui si ottiene, automaticamente, il codice colore, sia esadecimale che RGB, relativo al posto dove si trova la freccetta del mouse sullo schermo. Con F5 si ferma il colore, con F6 si copia il codice HEX con F7 il codice RGB. In questo caso manca la possibilità di fare lo zoom su una porzione di schermo o di immagine quindi è meno preciso.

3) ColorZilla è un'estensione per Chrome e Firefox che serve a scegliere i colori da usare ed il codice esadecimale del punto selezionato. ColorZilla ha uno strumento per analizzare i colori dei siti web, una tavolozza di scelta ed un generatore di gradienti CSS. Per le sue funzioni e la comodità è forse lo strumento migliore per chi vuole esplorare i colori dei siti.

4) Siccome la scelta dei colori deve essere coerente ci vuole un certo occhio per non fare una "pacchianata" evitando quindi di accostare dei colori sgargianti che darebbero fastidio e diventerebbero di cattivo gusto. Bisgona considerare che la scelta dei colori giusti è importante sia per la leggibilità e l'estetica, sia per questioni di marketing. Scegliere i colori giusti porta infatti a catalizzare l'attenzione del pubblico su alcuni particolari importanti. Per gli schemi dei colori è possibile quindi usare uno strumento online, Paletton, che mostra, dato un certo colore, quali altri sono compatibili ad esso.

5) Color Palette Generator dà un supporto e ispirazione a chi crea siti web per generare le variazioni cromatiche, con il relativo codice.

6) Colorzilla è un'estensione per Google Chrome, che serve a trovare i colori usati nei siti web e provare diverse combinazioni.

7) Per quanto riguarda invece il contrasto dei colori è importantissimo fare in modo che, il sito o la presentazione o il disegno di una immagine, abbia i colori ben definiti. Bisogna infatti considerare che la percezione dei colori non è la stessa per tutti e che, per problemi di vista o daltonismo, può capitare che una scritta su uno sfondo diventi illegibile. Lo strumento migliore da usare è il software Contrast-Checker che fa la verifica automatica e immediata del contrasto tra due colori secondo gli standard internazionale dei siti web WCAG (Web Content Accessibility Guidelines).

8) CPick è un altro cattura colori automatico in cui si deve premere il tasto "Click and Drag", tenerlo premuto e trascinare il cursore del mouse trasformatosi in una griglia adatta a selezionare con precisione un colore da qualsiasi cosa appaia sul desktop.
CPick mostra, per ogni colore inquadrato, il codice RGB, quello esadecimale, il decimale, e quelli HSV e CMYK. Tra i pulsanti in alto ce ne sono due molto utili a chi sta creando un sito web perchè è possibile creare una lista di colori in modo da memorizzarli ed possibile generare il codice CSS o HTML per dare uno schema colori a una pagina web.

LEGGI ANCHE: Identificare colori e creare palette con App su Android e iPhone/iPad