Come trovare il codice di un colore cliccandoci sopra.

Certamente sarete a conoscenza che i colori nel web sono individuati da particolari codici dei colori secondo le regole del modello HEX esadecimale, RGB o HSB. Tali codici determinano in modo univoco i colori. La rappresentazione parte da tre colori primari che possono essere mischiati in quantità variabili che vanno da 0 a 255 per un totale di 256x256x256= 16777216 colori che sono in numero superiore a quelli percepibili dall'occhio umano.

Nel programma Photoshop e in altri software grafici esiste lo strumento Contagocce che serve per estrarre il codice del colore del pixel su cui si clicca con il mouse. Lo strumento gratuito PicPick che abbiamo già visto utile per misurare le dimensioni degli elementi di una pagina web offre anche il tool Selettori colori che funziona proprio come il Contagocce di Photoshop o Gimp.

Inserire nel blog un tool per scurire e schiarire i colori partendo dal loro codice esadecimale.

Non sono particolarmente esperto di tematiche grafiche anche se uso le poche nozioni che conosco con continuità nella mia attività di blogging. Se possedete e gestite un sito vi sarete certamente trovati nella necessità di scurire o schiarire un colore modificando direttamente il suo codice. Esistono vari modelli per descrivere un colore quali HEX (codici esadecimali), RGB (rosso, verde, blu), CMYK (ciano, magenta, giallo, key black), HSB (tonalità, saturazione, luminosità). Quando un colore non può essere rappresentato da un modello di colore si dice che va fuori gamut con quest'ultimo che rappresenta appunto l'insieme dei colori rappresentabili da quel dato modello. Non sempre è possibile schiarire o scurire un colore perché appunto si può andare fuori gamut. Lasciando però da parte queste nozioni teoriche e le possibili eccezioni focalizziamo l'attenzione su un codice esadecimale che rappresenta un colore e che noi vogliamo schiarire o scurire di uno o più toni.

Come convertire un codice RGB in HEX e un codice HEX in RGB.

Ciascun colore può venire identificato con un determinato codice. Quelli più conosciuti sono il RGB e il codice HEX o ESA o esadecimale. RGB è l'acronimo delle parole inglesi Red, Green e Blue con ovvio significato. La rappresentazione di un colore in RGB è data da una terna ordinata di numeri che vanno da 0 a 255 e che indicano la quantità di colore primario presente. A dir la verità il verde non sarebbe un colore primario ma spero mi si passi l'espressione. I contributi dei singoli colori determinano quello che sarà il colore effettivo. Il valore 0 significa nessuna presenza di quel colore mentre 255 indica una presenza massima.

Per fare degli esempi (0,0,0) è il colore nero, (255,255,255) il colore bianco, (255,0,0) è il rosso, (0,255,0) il verde e (0,0,255) il blu. Quando si vuole indicare un colore nel linguaggio CSS (o anche HTML) l'espressione che viene usata con RGB è per esempio

color:rgb(123,12,21); 

Con i valori numeri che identificano univocamente il colore. Se invece si utilizza il codice HEX ciascun colore viene indicato da sei numeri esadecimali (i numeri naturali da 0 a 9 più le lettere A, B, C, D, E, F). Si tratta in sostanza di  passare da dei numeri decimali a un sistema in base 16. Nei CSS con il codice HEX occorre inserire delle righe di questo tipo

PF Color Tool per identificare, convertire e mescolare i colori.

Ogni colore è univocamente associato a un suo codice che lo individua completamente. I codici dei colori possono essere scritti secondo le regole HEX o RGB ma c'è anche la possibilità di contrassegnarli con il loro nome in inglese usando per esempio le tabelle di W3Schools ColorNames. Un altro tool molto interessante è la tabella dei colori in italiano che converte un nome di colore italiano in un codice. Dopo aver parlato del programma non gratuito Color Schemer Studio e della sua versione gratuita online, ho anche accennato a Color Picker altro tool semplicissimo da usare per conoscere i codici dei colori che non ha neppure bisogno di installazione.

PF Color Tool è un altro programma gratuito che ci consente di fare moltissime cose nell'ambito dei colori. Tra l'altro ha anche una versione in italiano. Durante l'installazione occorre stare attenti a non scaricare altri programmi che fanno da sponsor. E' sufficiente inserire le flag solo nelle opzioni che interessano. L'interfaccia del programma si presenta in questo modo

Color Picker per conoscere i codici RGB e HEX dei colori di foto, immagini, icone o banner .

Anche chi ha solo una modesta dimestichezza con il blogging sa che ad ogni colore è associato un suo codice. C'è innanzitutto il codice RGB che è formato da una terna di numeri che vanno da 0 a 255 e che determina la quantità di Rosso (Red), Verde (Green) e Blu (Blue) che occorrono per ottenere quella data tonalità. Quando i numeri sono tutti e tre uguali significa che si tratta di un grigio. Utilizzando la stessa procedura con i tre colori base, ma con numeri esadecimali, c'è pure il codice HEX che è quello più usato in HTML anche se si può benissimo usare l'altro. Per saperne di più potete consultare il post che ho dedicato ai codici dei colori. Ad esempio questo colore RGB (253,188,183) corrisponde al colore esadecimale #fdbcb7. I colori primari sono altra cosa (giallo, ciano e magenta) e sono quelli che non possono essere ottenuti con una miscela degli altri colori.

In tutti i programmi di grafica, dai sofisticati Photoshop e Gimp, al più semplice Paint.NET c'è lo Strumento Contagocce per acquisire il codice di un colore cliccandoci sopra. Quando si naviga sul web e siamo interessati a conoscere il codice di un particolare colore che ci ha affascinato, in teoria dovremmo effettuare uno screenshot della sezione della pagina in cui è presente, salvarlo come file, aprirlo con uno dei programmi citati in precedenza e utilizzare lo Strumento Contagocce.

Effetto neve colorata da inserire nel blog.

Appoggiandomi a uno script creato da Schillmania presento un effetto nevicata colorata di cui viene modificata la direzione attraverso il movimento del mouse. L'inserimento dell'effetto è semplicissimo. Si tratta di andare su Design > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice

<!--Effetto neve colorata inizio-->
<script type="text/javascript" src="http://dl.dropbox.com/u/2574553/snowstorm.js" /></script>
<!--Effetto neve colorata fine - www.ideepercomputeredinternet.com-->

Il widget andrà salvato e posizionato nella parte alta del template. Il colore della nevicata è blu vale a dire che ha questo codice HEX #003366. Guarda la Demo della nevicata blu -

Se volete cambiare il colore per renderlo più adatto allo sfondo del vostro blog, dovete cliccare con il destro del mouse su questo collegamento e scegliere Salva link con nome. IL file javascript dovrà essere aperto con Notepad++ (o tool simile) e si potrà sostituire il colore della neve che si trova nella linea 26

this.snowColor = '#003366';

Se non sapete come fare o addirittura di cosa parlo,  leggetevi il post sul codice dei colori. Ulteriori aiuti possono venire dalla tabella interattiva dei colori in italiano. Salvate il file e caricatelo su DropBox oppure su Google Sites in modalità Schedario. Acquisitene l'URL e sostituitelo nel codice  a http://dl.dropbox.com/u/2574553/snowstorm.js.

Vi consiglio di usare DropBox che è veramente eccellente. Se non siete ancora iscritti fatelo subito mediante questo referral DropBox.

Aggiornamento: Se volete la nevicata di colore azzurro ghiaccio sostituite l'URL

http://dl.dropbox.com/u/2574553/snowstorm.js 

con quest'altro 

http://dl.dropbox.com/u/2574553/snowstorm-azzurro-ghiaccio.js

2 Create a Website per conoscere il codice di un colore e i codici dei colori che gli si intonano.

Se si ha un blog prima o poi dobbiamo fare i conti con i codici dei colori per personalizzarne l'aspetto. Ci sono programmi gratuiti come Color Schemer Studio che permettono una loro buona gestione ma se vogliamo un tool online ecco che 2 Create a Website è proprio quello che fa al caso nostro. Nel sito ci sono un sacco di strumenti per Blogger che forse vedremo più in dettaglio una prossima volta adesso occupiamoci nello specifico dei colori.

Come estrarre i colori da un sito web.

Un sistema che uso solitamente è quello del piccolo programma Color Schemer Studio che è gratuito e permette mediante lo strumento contagocce di catturare i colori presenti in una pagina web.

I Like Your Colors è un sito che consente rapidamente di acquisire rapidamente il codice esadecimale dei colori presenti in un sito.

Il servizio non richiede registrazione e per poter estrarre i colori basta inserire l’URL della pagina e cliccare su Get Colors

Accanto ad ogni colore è visualizzato il codice corrispondente.

Come conoscere il codice numerico dei colori.

In questo articolo ho spiegato come si possa arrivare facilmente alla conoscenza dei valori esadecimali di un qualsiasi colore attraverso Photoshop. Ricapitolo brevemente il concetto che ad ogni colore è assegnata una terna di numeri che va da 0 a 255 nel sistema RGB (Rosso, Verde, Blu), 0 rappresenta il minimo contributo del colore, 255 il massimo. (0,0,0) è il colore nero (255,255,255) è il bianco.

Esiste anche un'altra forma di rappresentazione dei colori che si basa sui valori esadecimali cioè 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. In questo caso il colore viene contrassegnato da sei valori esadecimali preceduti dal simbolo del cancelletto, p.e.

#222A58

Può esserci la necessità di conoscere questi valori per un colore che  è presente in una pagina web, in un bordo o in una fotoo in qualche immagine che si è scaricato. La conoscenza di questo codice è fondamentale p.e. se si vuole dei colori della pubblicità uguali all'header del blog, oppure se si vogliono creare dei rettangoli o tabelle con i colori che si addicono di più.

Premetto che si può comunque usare Photoshop o altro programma di grafica ma se si vuole qualcosa di più specifico ecco che si può provare Color Schemer Studio. Il programma non è gratuito ma c'è anche una versione online.

Nella versione online si può digitare sulla sinistra i valori delle terne RGB oppure i valori in esadecimali per vedere i colori corrispondenti cliccando rispettivamente su Set RGB o Set HEX

Se si usa il programma invece è possibile acquisire i codici dei colori in un attimo usando uno strumento simile al Contagocce dei programmi di grafica

 

Dopo averci cliccato sopra, attraverso il mouse si clicca nel punto esatto del quale vogliamo conoscere i valori dei colori. Siamo aiutati anche attraverso una visione ingrandita della zona in cui operiamo.

Questa funzionalità non è l'unica di questo programma che serve per una gestione completa dei colori e per creare gli abbinamenti migliori.