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.

Oto255.com è un tool gratuito online che consente di ottenere i codici di tutte le variazioni di un colore con un semplice click. Per iniziare si va su Pick a color, si incolla il codice del colore quindi si clicca su Pick color. E' anche possibile selezionare un colore a caso andando su Random Color 

Nella finestra successiva si vedranno tutte le variazioni di tonalità del colore immesso a partire dal bianco #FFFFFF fino al nero #000000.

I vari colori saranno sistemati in verticale, nella parte alta quelli più chiari mentre in quella bassa i più scuri. Accanto a ciascuno di essi sarà visibile la percentuale di luminosità che varierà tra lo 0% per il nero al 100% per il bianco. Si potranno copiare i codici dei colori più scuri o più chiari di quello dato cliccando su Click to copy. Per ogni colore è visibile il grado di aumento o di diminuzione della luminosità.

Per esempio il colore preso in esame  #D84938 ha una luminosità del 43%. Si può prendere una sua variazione più luminosa quale #e07063 che invece ce l'ha del 63% oppure una più scura quale #b93424 che ha una luminosità del 43%. Ecco questi colori come risultano dal browser:

Colore più chiaro - Colore originale - Colore più scuro -

Come vedete la differenza è appena apprezzabile ma è proprio quello che ci vuole per alcune realizzazioni grafiche che servono per inserire ombre, gradienti, bordi, effetti hover e altro ancora. Vi consiglio di mettere il sito Oto255.com nei vostri Segnalibri magari accanto a quello di Pixlr.