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.

I codici dei colori nel web.

La rappresentazione dei colori nelle pagine web avviene mediante l'inserimento di codici associati agli stessi colori. Agli albori di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4 bit. Successivamente la Profondità di colore diventò di 8 bit con 256 colori rappresentati che aumentarono a più di 65.000 con 16 bit. La vera conquista si ebbe con il TrueColor a 24 bit che consente di riprodurre i colori in modo molto fedele alla realtà con 16,7 milioni di colori rappresentabili. Si possono creare delle sfumature superiori a quelle che l'occhio umano riesce a percepire. La rappresentazione TrueColor parte da 3 colori primari, il rosso, il verde e il blu ciascuno dei quali è rappresentato da 8 bit per un numero complessivo di 2⁸=256. Il totale è quindi di 256x256x256 che dà appunto il numero di 16.777.216.

Come trovare tutte le tonalità di un colore per applicare ombre, bordi, gradienti e effetto hover.

Gli esperti di grafica non hanno problemi a trovare tutte le possibili tonalità di un colore se sanno usare bene programmi come Photoshop o Gimp, mettiamoci però nei panni di un blogger poco esperto in questo settore che voglia inserire un'ombra nel testo oppure, rendere più luminoso un pulsante nel bordo o ancora modificare leggermente il colore di un elemento al passaggio del mouse (effetto hover).

Queste operazioni per riuscire bene avrebbero bisogno di un procedimento semplice per ricavare tutte le tonalità a partire da un dato colore. Ricordo che i codici dei colori sono delle serie di sei numeri esadecimali. Vale a dire i numeri da 0 a 9 più le lettere A, B, C, D, E, F. Se si ha un codice di un colore, per esempio #D84938 che è poi uno di quelli usati in questo blog, non è per nulla scontato trovare i colori che abbiano la stessa tonalità e che siano semplicemente più chiari o più scuri di quello dato.

Nomi di colori in inglese e codici corrispondenti.

Quando ci troviamo a editare del testo abbiamo in genere tutti gli strumenti per scegliere i colori senza mettere mano al codice HTML. Nell'editor di Blogger o in Windows Live Writer è sufficiente selezionare una porzione di testo e andare sull'icona del colore. Se si andasse in Modalità HTML si vedrebbe un codice di questo genere

<span><font color="#0000ff">Testo colorato</font></span> che dà luogo a una scritta di questo tipo Testo colorato

Ho usato il tag <span> che è quello del testo in linea ma potrebbe essere utilizzato pure <p> o <div> che rappresentano il paragrafo  e un generico contenitore. Alternativamente ai codici esadecimali dei colori, si possono usare i nomi dei colori ma solo nella loro espressione inglese.

<span><font color="DarkOrchid">Testo colorato</font></span> genera la scritta Testo colorato

Il problema è che non sempre si conoscono i nomi dei colori e i codici a loro associati. Inoltre bisogna che il colore in oggetto sia tra quelli che vengono riconosciuti come valore dell'attributo. Da notare che nel primo caso si mette il cancelletto mentre con i nomi non lo si fa. Oltre all'attributo colore si può inserire anche la dimensione

Tabella interattiva in italiano dei codici dei colori per trovare più facilmente quello giusto.

Se avete un blog sarete certamente a conoscenza che ad ogni colore vengono associati dei numeri o delle lettere secondo quello che sono i codici dei colori. Si può trattare di una terna ordinata di numeri da 0 a 255 oppure di una serie di sei caratteri esadecimali. In quest'ultimo caso, il più usato, si può utilizzare anche solo una terna e i caratteri sono precedenti dal simbolo del cancelletto (#), quando vengono inseriti in un codice HTML, Javascript, ecc. Si usa la terna quando i caratteri sono ripetuti a coppie, per esempio #FF00FF si può anche scrivere #F0F.

Se siamo abituati a ragionare in termini di nomi di colori in italiano (ceruleo, rosa confetto, rosso papavero, indaco, terra d'ombra bruciata, verde bottiglia, ecc) ci troviamo certamente in difficoltà a trovarne il relativo codice RGB o HEX in esadecimali.

Ci viene in soccorso un sito molto interessante messo in rete da Libero che accosta la definizione italiana del colore al suo codice. Nella Tabella interattiva dei colori, oltre a acquisire il codice dei colori più comuni, cliccando sul pulsante relativo possiamo realmente visualizzarlo in tutto lo sfondo della pagina

I colori presenti sono 240 quindi sono rappresentati quelli più comuni. Nella parte bassa c'è anche un'interessante scala di grigi ordinati secondo la percentuale del nero presente. Nello screenshot ho cliccato sul colore senape. E' un tool interessante che sono sicuro in molti metteranno nei Preferiti.

ColorSuckr per estrarre i codici dei colori da un’immagine per utilizzarli nel blog o nel design.

Ho già parlato della corrispondenza tra sestine di numeri esadecimali e colori nell’articolo sui codici dei colori, adesso voglio illustrare le funzionalità di ColorSuckr che permette di estrarre questi codici da qualsiasi immagine presente nel web con un solo click. Questi codici possono servire ovviamente per creare design o sfondi che si adattano all’immagine in questione.

Il funzionamento è semplicissimo, basta recarsi nella home del sito e incollare l’URL dell’immagine dalla quale vogliamo estrarre i colori, si clicca quindi su Get Colours

Nella parte sottostante saranno visualizzati tutti i colori principali della foto con i codici relativi. Se si va su Color Scheme, che si trova sotto ciascun colore ecco che viene mostrato un piano di colori che si addicono a quello selezionato  

Ulteriori features sono

1. Si possono vedere i risultati nei formati RSS, XML e JSON
2. Si può scaricare tutto lo schema dei colori in formato .ASE di Adobe
3. Viene creato un link permanente  al nostro schema di colori
4. Opzione di cambiamento tra sfondo scuro e sfondo chiaro
5. Non è richiesta nessuna registrazione ed è totalmente gratuito

Esiste anche un’estensione per Firefox che velocizza ulteriormente la procedura visto che non sarà più necessario aprire la pagina del tool

• Installa l’add-on per Firefox ColorSuckr 0.1 -

sarà sufficiente fare click sull’immagine con il destro del mouse per estrarre i 12 colori più presenti. L’add-on è sperimentale quindi prima dell’installazione bisogna mettere il segno di spunta nell’apposito quadratino. Nel menù contestuale l’opzione da selezionare è Extract Image Colors

         

ColorZilla è un’estensione di Firefox per catturare i colori da ogni pagina web.

Certamente saprete che ogni colore ha un proprio codice e da questo è univocamente determinato. Il codice può essere formato da una terna di numeri da 0 a 255 oppure da sei caratteri esadecimali (tutti i numeri più le lettere da A fino a F). Se volete saperne un po’ di più potete leggervi questo post di qualche tempo fa.

ColorZilla è un’estensione per Firefox che mette a disposizione degli strumenti per la gestione e l’acquisizione di colori da tutte le pagine web con solo un paio di click.

Dopo l’installazione e aver riavviato il browser, cliccando sul destro del mouse nel menù contestuale viene mostrata  anche l’opzione  di ColorZilla

In Webpage DOM Color Analyzer vengono estratti tutti i colori della pagina in cui siamo e vengono mostrati in un rettangolo nella parte bassa  dello schermo. Ecco un’analisi di questo sito

 
Il Contagocce  è l’analogo strumento presente in tutti i programmi di grafica che consente di catturare i colori pixel per pixel.

Quando si sceglie il puntatore del mouse prende la forma di una piccola croce che può essere posizionata nel punto esatto da cui si vuole estrarre il colore.

Dopo aver cliccato, in basso a sinistra dello schermo viene mostrato il pennello che è l’icona dell’add-on insieme ai codici esadecimali del colore acquisito

Il colore viola selezionato  in questo caso è (128,0,128) in RGB e #800080 in HEX. Un’estensione veramente molto utile per i grafici e non solo.

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.