Il metodo HSB e il Selettore Colore. La gestione “naturale” del colore

Ricordo ancora i pastrocchi che combinavo quando da piccolo, mentre cercavo di dipingere, mescolavo i colori per ottenere le tonalità desiderate. La soluzione allora era semplice: “mamma comprami altri colori!”.

Sappiamo più o meno tutti che la maggior parte dei colori visibili possono essere ottenuti a partire da combinazioni di alcuni colori-base: Giallo, Magenta, Ciano o Rosso, Giallo, Blu per dirla in modo meno tecnico.

Più facile a dirsi che a farsi, come si suol dire. Purtroppo, se non si padroneggia la tecnica del colore i risultati sono spesso tinte spente e magicamente quasi tutte tendenti a un marrone-grigiastro!

I programmi di grafica hanno però efficienti strumenti per creare nuovi colori e campioni. Ve ne è uno, sicuramente il più intuitivo, che ti sarà utile approfondire: il Selettore Colore.

Quando usi il Selettore Colore stai in pratica lavorando sui tre valori del metodo Hsb. Se non comprendi tale metodo continuerai perciò a usare a casaccio questo strumento ottenendo scarsi risultati (e dovrai sempre chiamare mamma!).

Cos’è il Metodo Colore Hsb?

È uno dei diversi metodi matematici per definire il colore. Non è basato su colori primari come i sopraccitati ma su tre caratteristiche visive del colore. Nella figura sotto è rappresentato il selettore colore di Photoshop.

Quello che ci interessa sono i valori H, S e B evidenziati. Certo possono essere inseriti direttamente come valori numerici ma è molto più intuitivo usare la colonna verticale colorata e il riquadro a sinistra col selettore a cerchio.

“Colonna” e “Riquadro” sono lo strumento visivo per definire il colore nel metodo Hsb.

Hsb: il metodo “naturale”

Il metodo colore Hsb si potrebbe quindi definire il modo più “naturale” per creare un colore da impiegare in un’illustrazione, nel nostro depliant, nella grafica delle nostro catalogo ecc.

Non solo perché, come già accennato, può essere creato visivamente lasciando al programma l’incombenza di estrapolare i valori numerici giusti ma anche perché si basa su caratteristiche “naturali” del colore.

Infatti, quando osserviamo un oggetto colorato non vediamo numeri (a meno che, come me, non siate aberrati da trent’anni di codifica del colore in quadricromia – Cmyk) ma notiamo la tinta (il colore vero e proprio diciamo) e poi se è chiaro o scuro e se è vivace o sbiadito.

Con un po’ di osservazione e pratica noterete che ogni colore può essere valutato e rappresentato con questi parametri.

Ecco, il metodo colore Hsb è questo: “colore, chiaro/scuro, vivace/sbiadito”. Tre caratteristiche che ci danno lo spettro dei i colori visibili all’occhio umano (non proprio tutti, nessun metodo colore per la stampa o per il monitor li restituisce tutti, tranne un insieme matematico teorico che magari approfondiremo in futuro).

Il metodo Hsb si basa in un certo senso semplicemente su ciò che si vede o, in altre parole, su come siamo abituati a valutare un colore.

Gli elementi del Metodo Hsb

Andiamo un po’ più in profondità. È assai opportuno dare un definizione dei tre termini che formano l’acronimo HSB poiché, per mia esperienza diretta, sono spesso malcompresi.

1. H – la Tonalità (H – Hue), detta anche Tinta. Immaginiamo i colori dell’arcobaleno, i colori nel senso più caratterizzante del termine: i gialli, i verdi, i rossi, i viola…
2. S – la Saturazione (S – Saturation). Il grado di vivacità di un colore (quanto si allontana dal grigio). Immaginiamo una TV a colori che gradualmente passa al bianco e nero e quindi perde saturazione o il contrario.
3. B – la Brillantezza (B – Brightness) detta anche Luminosità. Immaginiamo lampadine emananti luce dello stesso colore ma di potenza (brillantezza diversa).

Nel metodo Hsb il colore è rappresentato dalla “formula”: Colore = Tinta (H) + Saturazione (S) + Brillantezza (B).

Per essere molto pratici, se volessimo creare un nuovo colore nel metodo Hsb si procederebbe come mostrato nella figura sotto basandoci sul selettore colore di Photoshop, del resto molto simile a quello di tanti altri programmi:

Definire un nuovo colore nell Metodo Hsb

1. Stabilire il valore H – Hue – Tonalità

È senz’altro molto più pratico scegliere per prima la tonalità (il valore H) poiché siamo abituati a definire i colori innanzitutto in base a tale caratteristica primaria.

Vogliamo un qualche rosso, un verde, un blu? Questa è la tonalità. Essendo il metodo colore Hsb derivato alla Ruota dei Colori, il colore – H (tonalità) assume valori tra 0 e 360°. Interessante che un colore si misuri in gradi, no? Vediamolo meglio.

Nel selettore colori di Photoshop, il valore H – tonalità, viene determinato dalla posizione sulla colonna 1 (vedi la figura sopra). Immaginate tale barra verticale come la ruota dei colori rappresentata qui sotto ma in posizione “distesa”.

2. Stabilire il valore S – Saturazione

Quella di definire come secondo valore la saturazione è un mio consiglio più che una regola, in realtà si potrebbe definire a questo punto la brillantezza.

Credo però sia più comodo procedere così, perché lavorando con colori molto scuri è più difficile valutare in un secondo momento la loro saturazione.

Ad ogni modo per saturazione cerchiamo di definire “la quantità” di colore o per dirla in modo opposto “quanto tende al grigio”. Immaginate un monitor in bianco e nero: potremmo dire che rappresenta i colori con una saturazione pari a zero.

Le tinte più sature sono quindi colori più vivi, alcuni dicono “più pieni”. Tecnicamente si dice “più saturi”.

Nella figura che segue vediamo il medesimo colore, l’azzurro con varianti dove è stato modificato solo il valore di saturazione – S nel metodo Hsb. È sempre lo stesso colore, inteso come “tinta”.

La saturazione, come la brillantezza assume valori tra il 100% e lo 0%… dalla Tv a colori a quella in bianco e nero.

3. Stabilire il valore B – Brillantezza

Determiniamo ora la brillantezza che trasforma il mio colore da puro al nero con tutte le gradazioni di mezzo.

Potremmo immaginare la brillantezza come “quanto è illuminato il colore”, quasi manovrassimo una fonte esterna di luce a determinarlo.

Un oggetto sotto la luce del giorno ci appare nel suo colore nel modo più luminoso e naturale. Man mano che la sera arriva il colore tende a essere sempre meno brillante.

Poiché si potrebbe fare un po’ di confusione tra i concetti di saturazione e di brillantezza, un confronto servirà a chiarire i dubbi. Abbiamo preso un rosso di partenza alla massima brillantezza e saturazione e gli abbiamo, prima, tolto saturazione (immagine in basso) e poi, allo stesso rosso di partenza, brillantezza (immagine sotto).

Nell’esempio sopra sto “togliendo colore” a un rosso alla massima saturazione possibile. Nell’esempio sotto sto “aggiungendo nero” al rosso.

Quel riquadro quasi nero, è sempre un rosso, tecnicamente parlando, anche si si fatica a descriverlo come tale.

Avrai infatti sicuramente sperimentato che è difficile capire il colore di un oggetto alla sera o peggio ancora di notte.

Il bianco NON è il contrario del nero!

È interessante ma soprattutto utile comprendere che nel metodo Hsb, il bianco non è opposto al Nero.

In pratica significa che togliere solo il nero non è il modo giusto di schiarire un colore che si è appena scelto e produrrà risultati limitati. Osserviamo infatti il riquadro di selezione Saturazione-Brillantezza di Photoshop:

Nell’immagine si vede che per avvicinarsi al bianco (schiarire un colore) devo muovere il selettore (il cerchietto nel riquadro grande) sia in alto che a sinistra, in diagonale, modificando quindi sia il valore S (diminuendolo), saturazione, sia B (aumentandolo), brillantezza.

Sempre dalla stessa immagine sopra si evince che, per avvicinarsi al nero è sufficiente abbassare il selettore solamente in senso verticale.

Un colore che tende al bianco è quindi sia un colore meno saturo sia un colore più brillante. Interessante, no? Se agissi solo sulla brillantezza (nero) non otterrei mai il bianco a meno che non lavori su un grigio puro (già alla minima saturazione).

Creare una tavolozza colori col metodo Hsb è troppo semplice!

Creare una palette di colori non è argomento da “illuminati” e nemmeno serve studiare i trattati sul colore di Newton o Goethe.

Col metodo Hsb è vergognosamente semplice creare una tavolozza (palette) di colori. Non occorrerebbe nemmeno comprendere il significato di armonia del colore o dilinguarci in spiegazioni sulla teoria del colore.

Possiamo però dire che un insieme di colori è armonico quando vi è una “parentela” tra di essi. Non serve quindi diventare pazzi con formule astruse e ragionamenti cervellotici, basta trovare un sostema semplice per esprimere tale parentela.

Individuato quello che tecnicamente si chiama colore base, da esso col metodo Hsb è molto facile derivare i colori di una tavolozza adatta ai nostri scopi.

Definisci il tuo colore base e lavora sui suoi valori Hsb (se l’hai creato con altro metodo di colore trova l’Hsb corrispondente), crea quindi dei campioni modificando solo uno o due di tali valori.

Se vari il solo valore “H” otterrai una tavolozza come quella sotto. Se vari “H” e uno dei valori tra “S” e “B” otterrai un’emozione diversa, vedi il secondo esempio. È sufficiente tenere costante uno o due dei valori H, S e B.

Nient’altro. Avrai la tua tavolozza, un bel insieme di colori perfettamente armonizzati da usare nel tuo impaginato, nel tuo poster, nella tua copertina, dove vuoi.

Tutto qui ma se vuoi una palette più “complicata” prova delle varianti che seguano un logica, per esempio cambiando il valore di intervalli precisi o con una certa progressione.

Conclusioni

Partire dai valori Rgb e Cmyk per creare un preciso colore è molto meno intuitivo poiché ci costringe ad usare dei numeri.

È molto più comodo usare lo strumento Selettore Colore presente in tutti i programmi di grafica, impaginazione ed elaborazione testi. Bisogna però conoscere i passi corretti che ho appena descritto.

Naturalmente, una volta creato il colore col metodo Hsb si dispone di conseguenza anche dei corrispondenti valori Rgb e Cmyk, forniti dal programma, che magari ci serviranno per un controllo più approfondito e dettagliato o per ragioni tecniche.