logo simone provenzano

 

Tavolozza in stile Photoshop

Risorse per il tuo sito web

tavolozza colore rosso   tavolozza colore verde   tavolozza colore blu

 

 

 

 

 

Ecco una fantastica tavolozza in stile Photoshop che ti sarà molto utile per applicare i colori giusti al tuo sito.
La sua interfaccia grafica intuitiva e dinamica ti permette di scegliere facilmente un colore, e ti fornisce i corrispondenti valori da inserire nel codice delle pagine del tuo sito. In questo modo avrai un valido aiuto che ti consentirà di attribuire un colore allo sfondo della pagina o delle celle di una tabella, ai caratteri del tuo testo, ai bordi di un'immagine o di un livello, ecc.

Usare la tavolozza è un gioco da ragazzi, ma ti consiglio i seguenti passaggi:
1) Clicca sul valore "H";
2) Usa la barra verticale color arcobaleno per scegliere il colore di base (ad esempio il blu);
3) Perfeziona il colore utilizzando il riquadro maggiore sulla sinistra.
Puoi monitorare il colore corrente nel riquadro minore in alto a destra.

Ecco qui la tavolozza, buon divertimento!

 

 

 

 

Una volta che siamo sicuri di aver trovato il colore giusto, possiamo fare riferimento ai risultati che si trovano nella parte inferiore della tavolozza. Abbiamo la possibilità di scegliere fra tre codifiche di colore diverse:
1) HEX (Esadecimale) : presente nel campo "#";
2) RGB: presente nei campi "R" (Red = Rosso) , "G" (Green = Verde), e "B" (Blue = Blu) ;
3) HSL: presente nei campi "H" (Hue = Tonalità), "S" (Saturation = Saturazione) e "B" (Brightness = Luminosità)

 

Immaginiamo di voler usare un colore azzurro per i paragrafi di testo e di aver ottenuto i seguenti valori:

 

valori colori HEX RGB HSL

 

Dovremo impostare gli stili seguendo sintassi diverse in base alle diverse codifiche di colore:

 

HEX

p {
color: #2c85d8;
}

 

RGB

p {
color: rgb(44, 133, 216);
}

 

HSL

p {
color: hsl(209, 79%, 85%);
}

 

Il risultato che si otterrà sarà un testo colorato in questo modo.

Da notare che nella codifica HSL i valori di Saturazione e Luminosità si esprimono in percentuale.

 

 

 

Per completezza vediamo anche gli esempi relativi alle codifiche RGBa ed HSLa. Si tratta di codifiche analoghe a quelle RGB ed HSL, ma che in più contengono un canale alfa. Il canale alfa viene utilizzato per impostare un valore di trasparenza, e può andare da 0 (completamente trasparente) ad 1 (completamente opaco).
Nel caso degli esempi che seguono è stata impostata una trasparenza pari a 0,7. Si noti che nel codice, come separatore decimale, bisogna usare il punto al posto della virgola.

 

RGBa (Red, Green, Blue, Alfa)

p {
color: rgba(44, 133, 216, 0.7);
}

 

HSLa (Hue, Saturation, Brightness, Alfa)

p {
color: hsla(209, 79%, 85%, 0.7);
}

 

Per avere un'idea dei risultati prodotti dal canale alfa si osservino le immagini di esempio riportate di seguito. Tutte le immagini sono costituite da un livello con una foto di un gatto e, al di sopra, un livello di colore azzurro sul quale vengono impostati diversi valori del canale alfa. Si ottengono i seguenti risultati:
1) con alfa=0 il livello azzurro è completamente trasparente, quindi è praticamente invisibile;
2) con alfa=1 il livello azzurro è completamente opaco, quindi la foto sottostante non si vede;
3) con alfa=0.7 il livello azzurro è semi-trasparente, quindi si vede in parte anche la foto sottostante.

 

foto gatto   trasparenza canale alfa 1   trasparenza canale alfa 0.7

 

Tutti questi numeri ti stanno dando alla testa? Beh, allora sappi che esiste anche un'altra codifica, che consiste semplicemente nel chiamare i colori per nome! Si tratta inoltre di una codifica supportata da tutti i principali browser, quindi puoi utilizzarla tranquillamente senza problemi di compatibilità.
Se ti interessa, puoi approfondire la cosa nel seguente articolo: "Chiamiamo i colori per nome!".

 

 

Simone Provenzano

 

 

 

 

 

Privacy e Cookie