Come trovare le tonalità più chiare e più scure di un colore

Come trovare i codici dei colori più chiari e più scuri fino a 30 tonalità, a partire dal codice HEX esadecimale di un colore dato

Nei lavori di grafica e nel web design, si possono importare dei concetti usati da anni nella pittura, dove esiste il concetto di colore puro, cioè senza l'aggiunta di pigmento bianco o nero per schiarirlo o per scurirlo.

Nel precedente post abbiamo visto come oltre alla rappresentazione RGB, per i colori si possa scegliere anche il modello HSB, o HSL o HSV che individua i colori con i valori di Tonalità, Luminosità e Saturazione. Esiste anzi una corrispondenza biunivoca tra i valori delle terne RGB e quello delle terne HSL.

La domanda a cui voglio rispondere con questo post è la seguente: "Come si fa ad aggiungere del bianco o del nero a un colore a partire dal suo codice?" Ovvero, se si conosce il codice di un colore, quali sono i codici del colore più scuro di una o due tonalità o il codice del colore più chiaro di tre o quattro tonalità?

La ricerca di colori più scuri o più chiari è importante quando si voglia creare per esempio un bottone con un effetto di rilievo. Tramite il gradiente, si inserisce un colore più chiaro nella parte alta e uno più scuro nella parte bassa, proprio per inserire un effetto di luminosità in alto.

Un altro caso in cui è necessario trovare colori con tonalità più scure, si presenta se si debbono inserire delle ombreggiature diverse da quelle realizzate con il nero o con il grigio scuro.

Un tool online che consiglio per queste operazioni è Oto255, il cui numero è preso chiaramente dal valore massimo che possono assumere i numeri della terna RGB.

In basso della pagina di Oto255, sono mostrati dei colori su cui cliccare per trovarne le altre tonalità. Se invece vogliamo trovare delle tonalità più chiare o più scure di un determinato colore, dobbiamo andare su Enter a Color per poi digitare, nel campo che si apre, il codice esadecimale senza il cancelletto iniziale.

Dopo averlo fatto si va sul bottone Enter Color per aprire la  pagina delle tonalità più chiare e più scure

Ciascun tono più chiaro e più scuro del colore iniziale, ha un suo codice che può essere copiato cliccandoci sopra. Vengono rilevate 30 tonalità totali tra le più chiare e le più scure. Salendo verso l'alto si arriverà al bianco puro con codice #FFF mentre scendendo nelle tonalità vero il basso si arriverà al nero con codice #000.

In mezzo si potranno scegliere tutte le tonalità che si desiderano e che possono essere considerate come il colore iniziale a cui si sono aggiunti pigmenti bianchi per i colori più chiari e pigmenti neri per quelli più scuri. Tanto per fare un esempio, partendo dal colore con codice #864b88 si può scegliere il colore #b780b9 di 6 tonalità più chiaro e il colore #301b30 di otto tonalità più scuro.

Ecco come si può rappresentare anche graficamente questa differenza di tonalità

#b780b9

#a45fa7

#864b88

#663967

#301b30

Sono partito dal colore centrale per poi aggiungere due tonalità più chiare e due tonalità più scure.