Articolo originale: CSS Font Color – How to Style Text in HTML
Impostare un colore al testo di un sito web che stai costruendo potrebbe essere poco chiaro all'inizio. Ma in questo articolo impareremo come si fa.
Come impostare il colore del testo in HTML
In CSS, la proprietà background-color è abbastanza semplice da utilizzare per impostare il colore di sfondo di qualsiasi elemento.
Ma se vogliamo impostare il colore di qualcosa che è in primo piano nella pagina? Soprattutto del testo, di cui normalmente non si vuole impostare un colore di sfondo.
Non c'è una proprietà foreground-color in CSS, ma è la proprietà color che si occupa di questo.
In questo articolo, ti mostrerò come impostare il colore del testo utilizzando la proprietà color. Vedremo anche i vari modi in cui specificare i valori.
Ci sono 4 modi diversi per specificare i valori della proprietà color: nomi dei colori, valori esadecimali, valori RGB e valori HSL. Vediamo ora ciascuno di questi.
Nomi dei colori
Come implica il nome, si utilizza la proprietà color e si applica il valore scrivendo il nome del colore che si vuole. Questo può essere red, green, blue, orange, crimson, cyan, o qualsiasi altro nome (inglese) di colore. Esistono 147 nomi di colori riconosciuti dai browser.
La sintassi di base è questa:
elemento {
color: nomeColore;
}
<p>freeCodeCamp</p>
p {
color: crimson;
}
Colori esadecimali
I valori esadecimali vengono utilizzati per rappresentare i colori con un totale di 6 caratteri. Iniziano con il carattere # seguito da una cifra da 0 a 9 o da una qualsiasi lettera da A a F.
I primi 2 valori rappresentano il rosso, i successivi 2 il verde e gli ultimi 2 il blu. Con i valori esadecimali, non c'è limite alle tonalità di colori che si possono utilizzare.
<p>freeCodeCamp</p>
p {
color: #dc143c;
}
Colori RGB
RGB è l'abbreviazione di Red, Green e Blue (rosso, verde e blu). Con i colori RGB, si specificano i colori in termini di quanto rosso, verde e blu si vuole. Tutti e tre sono espressi con numeri tra 0 e 255.
C'è un tipo di RGB chiamato rgba. La ‘a’ aggiuntiva sta per alpha, che permette di specificare l'opacità (o trasparenza) del colore. Assume un valore che va da 0.0 a 1.0 – 0.0 significa 0% di opacità, 0.5 significa 50% di opacità e 1.0 significa 100% di opacità.
La sintassi di base è rgb(quantitàDiRosso, quantitàDiVerde, quantitàDiBlu, alpha).
Ci si può fermare a rgb(quantitàDiRosso, quantitàDiVerde, quantitàDiBlu) se non si vuole specificare un valore per alpha.
Ecco la sintassi per valori RGB standard:
<p>freeCodeCamp</p>
p {
color: rgb(220, 20, 60);
}
Ed ecco l'esempio con un valore alpha del 50% (0.5) di opacità:
p {
color: rgb(219, 20, 60, 0.5);
}
Colori HSL
HSL è l'abbraviazione di hue, saturation, e lightness (tonalità, saturazione e luminosità). È un altro modo per specificare il colore del testo (e di qualsiasi altra cosa che abbia un colore) in CSS.
- La tonalità rappresenta la ruota dei colori con 360°, dove il rosso è 0°, il verde è 120°e il blu è 240°.
- La saturazione è la quantità di grigio nel colore, espressa in percentuale. 0% rappresenta una tonalità di grigio mentre 100% è il colore stesso.
- La luminosità è la quantità di oscurità e luminosità nel colore espressa come una percentuale. 0% è nero e 100% è bianco.
Proprio come i colori RGB, si può anche impostare l'opacità del colore. Quindi, c'è anche hsla.
La sintassi di base completa è hsl(gradoDiColore, percentualeDiSaturazione, percentualeDiLuminosità, alpha). Ci si può fermare a hsl(gradoDiColore, percentualeDiSaturazione, percentualeDiLuminosità) se non si vuole un valore alpha.
<p>freeCodeCamp</p>
p {
color: hsl(348, 83%, 47%);
}
Si può applicare un'opacità particolare al colore HSL in questo modo:
p {
color: hsla(348, 83%, 47%, 0.5);
}
Per impostare un colore si dovrebbero utilizzare i nomi dei colori, i colori esadecimali, i colori RGB o i colori HSL?
Una delle cose meravigliose di CSS è che ci sono molteplici modi per fare la stessa cosa, come hai visto per l'applicazione di colori al testo.
Dato che abbiamo applicato i colori in 4 modi diversi, ci si potrebbe chiedere qual è il migliore da utilizzare.
Quando si usano i nomi dei colori, si è abbastanza limitati nel numero di colori diversi che si può applicare. Il rosso, il verde, il blu, il giallo o qualsiasi altro nome di colore hanno tante varianti che non sono disponibili usando solo i nomi dei colori. Abbiamo accesso solo a 147 colori predefiniti riconosciuti dai browser.
I colori esadecimali sono molto dinamici. Sono i più utilizzati tra gli sviluppatori perché il limite è solo la creatività. Con i colori esadecimali, si possono utilizzare varie tonalità e persino un colore che nessuno ha mai utilizzato prima.
I colori RGB sono tanto dinamici quanto i colori esadecimali. Oltre ad essere in grado di specificare quanto rosso, verde e blu si vuole da 0 a 255, si può anche impostare la trasparenza del colore con un valore alpha aggiuntivo.
HSL è il più dinamico di tutti. Si può specificare l'esatto colore che si desidera in gradi da 0 a 360 sulla ruota dei colori, si può impostare la saturazione e la luminosità che si desidera in percentuale, ed anche impostare un'opacità da 0.0 a 1.0.
Quindi dipende solo da ciò che si vuole e dai propri casi d'uso – e da quanto creativi o specifici si vuole essere.
Conclusione
Applicare i colori al testo aiuta a rendere un sito web più accattivante per i visitatori. La giusta combinazione di colori può anche aiutare a rendere il contenuto più leggibile.
In questo articolo abbiamo imparato come applicare dei colori al testo con i 4 diversi tipi di valori che si possono usare con la proprietà color.
Grazie per aver letto questo articolo e continua a programmare!