Quando si tratta di personalizzare il vostro sito, il colore dei font viene spesso trascurato. Nella maggior parte dei casi, chi possiede un sito web lascia il colore predefinito dei font come il nero o qualsiasi cosa gli stili del tema abbiano definito per il colore del testo del corpo e dei titoli.
Tuttavia, è una buona idea cambiare il colore del font HTML sul vostro sito web per diverse ragioni. Cambiare il colore del font HTML potrebbe sembrare complesso, ma in realtà è piuttosto semplice. Ci sono diversi modi per cambiare il colore del font sul vostro sito web.
In questo articolo, vi mostreremo diversi modi per cambiare il colore dei font del votro sito web, oltre a discutere sul perché andrebbe fatto in primo luogo.
Guardate la Nostra Video-Guida su Come Cambiare il Colore del Font HTML
Perché Cambiare il Colore del Font HTML?
Cambiare il colore del font è utile perché può aiutare a migliorare la leggibilità e l’accessibilità del vostro sito web. Per esempio, se il vostro sito usa una combinazione di colori più scuri, lasciare il colore del carattere nero renderebbe difficile la lettura del testo sulle pagine del sito.
Un’altra ragione per cui considerare di cambiare il colore del font è se avete intenzione di usare un colore più scuro dalla tavolozza dei colori del vostro marchio. Questa è un’altra opportunità per rafforzare il vostro marchio. Costruisce la coerenza del marchio e assicura che il testo in tutti i vostri canali di marketing abbia lo stesso aspetto.
Detto questo, vediamo come potete definire e cambiare il colore del font HTML.
Modi per Definire il Colore
Ci sono diversi modi per definire il colore nel web design, incluso il nome, i valori RGB, i codici esadecimali e i valori HSL. Diamo un’occhiata a come funzionano.
Nome del Colore
I nomi dei colori sono il modo più semplice per definire un colore nei vostri stili CSS. Il nome del colore si riferisce al nome specifico del colore HTML. Attualmente, esistono 140 nomi di colore supportati e potete usare uno qualsiasi di questi colori nei vostri stili. Per esempio, potete usare “blue” per impostare il colore di un singolo elemento sul blu.
Tuttavia, il lato negativo di questo approccio è che non tutti i nomi di colore sono supportati. In altre parole, se usate un colore che non è nella lista dei colori supportati, non potrete usarlo nel vostro progetto con il suo nome di colore.
Valori RGB e RGBA
Poi abbiamo i valori RGB e RGBA. RGB sta per Red (rosso), Gren (verde) e Blue (blu). Definisce il colore mescolando i valori di rosso, verde e blu, in modo simile a come mescolereste un colore su una tavolozza reale.
Il valore RGB si presenta così: RGB(153,0,255). Il primo numero specifica l’input di colore rosso, il secondo specifica l’input di colore verde e il terzo specifica il blu.
Il valore di ogni ingresso di colore può variare tra 0 e 255, dove 0 significa che il colore è totalmente assente e 255 significa che quel particolare colore è alla sua massima intensità.
Il valore RGBA aggiunge un altro valore al mix, ed è il valore alfa che rappresenta l’opacità. Va da 0 (non trasparente) a 1 (completamente trasparente).
Valore HEX
I codici colore hex funzionano in modo simile ai codici RGB. Sono composti da numeri da 0 a 9 e lettere da A a F. Il codice hex appare così: #800080. Le prime due lettere specificano l’intensità del colore rosso, i due numeri centrali specificano l’intensità del colore verde e gli ultimi due impostano l’intensità del colore blu.
Valori HSL e HSLA
Un altro modo per definire i colori in HTML è quello di usare i valori HSL. HSL sta per Hue (tonalità), Saturation (saturazione) e Lightness (luminosità).
La tinta usa i gradi da 0 a 360. Su una ruota dei colori standard, il rosso è circa 0/360, il verde è a 120 e il blu è a 240.
La saturazione usa le percentuali per definire quanto è saturo il colore. 0 rappresenta il bianco e nero e 100 rappresenta il colore completo.
Infine, la luminosità usa le percentuali in modo simile alla saturazione. In questo caso, 0% rappresenta il nero e 100% il bianco.
Per esempio, il colore viola che abbiamo usato durante questo articolo apparirebbe così in HSL: hsl(276, 100%, 50%).
HSL, come RGB, supporta l’opacità. In questo caso, usereste il valore HSLA dove A sta per alfa ed è definito in un numero da 0 a 1. Se volessimo abbassare l’opacità del viola dell’esempio, useremmo questo codice: hsl(276, 100%, 50%, .85) .
Ora che sapete come definire il colore, vediamo diversi modi per cambiare il colore del carattere HTML.
Opzione Vecchia: i Tag <font>
Prima che HTML5 fosse introdotto e impostato come standard di codifica, potevate cambiare il colore del carattere usando i tag font. Più precisamente, si usava il tag font con l’attributo color per impostare il colore del testo. Il color era specificato o con il suo nome o con il suo codice esadecimale.
Ecco un esempio di come appariva questo codice con il codice colore esadecimale:
<font color="#800080">Questo testo è viola.</font>E questo è come potreste impostare il colore del testo in viola usando il nome del colore:
<font color="purple">Questo testo è viola.</font> Tuttavia, il tag <font> è deprecato in HTML5 e non è più utilizzato. Cambiare il colore del font è una decisione di design e il design non è lo scopo primario dell’HTML. Pertanto, ha senso che il tag <font> non sia più supportato in HTML5.
Quindi se il tag <font> non è più supportato, come si fa a cambiare il colore del carattere in HTML? La risposta è con i fogli di stile a cascata o CSS.
Nuova Opzione: Stili CSS
Per cambiare il colore del font HTML con i CSS, userete la proprietà CSS color abbinata al selettore appropriato. I CSS vi permettono di usare i nomi dei colori, i valori RGB, hex e HSL per specificare il colore. Ci sono tre modi di usare i CSS per cambiare il colore del carattere.
CSS in Linea (Inline)
Il CSS in linea (o inline) viene aggiunto direttamente al vostro file HTML. Userete il tag HTML come <p> e poi lo stilizzerete con la proprietà del colore CSS in questo modo:
<p style="color: purple">Questo è un paragrafo viola.</p>Se volete usare un valore esadecimale, il vostro codice sarà simile a questo:
<p style="color:#800080">Questo è un paragrafo viola.</p>Se volete usare il valore RGB, lo scriverete così:
<p style="color:RGB(153,0,255)">Questo è un paragrafo viola.</p>Infine, usando i valori HSL, userete questo codice:
<p style="color:hsl(276, 100%, 50%)">Questo è un paragrafo viola.</p>Gli esempi qui sopra vi mostrano come cambiare il colore di un paragrafo sul vostro sito web. Ma non dovete limitarvi solo ai paragrafi: potete cambiare anche il colore del font dei vostri titoli e dei link.
Per esempio, sostituendo il tag <p> qui sopra con <h2> cambierete il colore del testo del titolo, mentre sostituendolo con il tag <a> cambierete il colore di quel link. Potete anche usare l’elemento <span> per colorare qualsiasi quantità di testo.
Se volete cambiare il colore di sfondo dell’intero paragrafo o di un titolo, potete farlo in modo molto simile a come cambiereste il colore del font. Dovete invece usare l’attributo background-color e usare il nome del colore, i valori hex, RGB o HSL per impostare il colore.
Ecco un esempio:
<p style="background-color: purple">CSS Incorporato (Embedded)
Il CSS incorporato (o embedded) si trova all’interno dei tag <style> e posizionato tra i tag head del vostro documento HTML.
Il codice sarà simile a questo se volete usare il nome del colore:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>Il codice qui sopra cambierà il colore di ogni paragrafo della pagina in viola. Simile al metodo CSS in linea, potete usare diversi selettori per cambiare il colore del font dei titoli e dei link.
Se volete usare il codice esadecimale, ecco come sarebbe il codice:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>L’esempio qui sotto usa i valori RBGA così potete vedere un esempio di impostazione dell’opacità:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: RGB(153,0,255,0.75),
}
</style>
</head>E il codice HSL sarebbe come questo:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>CSS Esterno
Infine, potete usare il CSS esterno per cambiare il colore del font sul vostro sito web. Il CSS esterno è un CSS inserito in un file separato, di solito chiamato style.css o stylesheet.css.
Questo foglio di stile è responsabile di tutti gli stili del vostro sito e specifica i colori e le dimensioni dei font, i margini, i padding, le famiglie di font, i colori di sfondo e altro. In breve, il foglio di stile è responsabile dell’aspetto visivo del vostro sito.
Per cambiare il colore del carattere con CSS esterno, dovreste usare i selettori per dare stile alle parti di HTML che volete. Per esempio, questo codice cambierà tutto il testo del corpo del vostro sito:
body {color: purple;}Ricordate, potete usare i valori RGB, hex e HSL e non solo i nomi dei colori per cambiare il colore del font. Se volete modificare il foglio di stile, vi raccomandiamo di farlo in un editor di codice.
In linea, Incorporato o Esterno?
Così ora sapete come usare i CSS per cambiare il colore del font. Ma quale dei tre metodi usare?
Se usate il codice CSS in linea, lo aggiungerete direttamente nel vostro file HTML. In generale, questo metodo è adatto per correzioni rapide. Se volete cambiare il colore di uno specifico paragrafo o titolo in una singola pagina, questo metodo è il più veloce e il meno complicato.
Tuttavia, gli stili in linea possono rendere la dimensione del vostro file HTML più grande. Più grande è il vostro file HTML, più tempo impiegherà la vostra pagina web a caricarsi. Oltre a questo, i CSS in linea possono rendere l’HTML disordinato. Per questo, cambiare il colore del font HTML con il metodo dei CSS in linea è generalmente sconsigliato.
Il CSS incorporato è posizionato tra i tag <head> e all’interno dei tag <style>. Come il CSS in linea, va bene per correzioni veloci e per sovrascrivere gli stili specificati in un foglio di stile esterno.
Una notevole distinzione tra gli stili in linea e incorporati è che si applicano a qualsiasi pagina in cui vengono caricati i tag head, mentre gli stili in linea si applicano solo alla pagina specifica in cui si trovano, tipicamente all’elemento a cui mirano in quella pagina.
L’ultimo metodo, il CSS esterno, usa un foglio di stile dedicato per definire i vostri stili visivi. In generale, è meglio usare un foglio di stile esterno per mantenere tutti gli stili in un unico posto da cui poterli modificare con facilità. Questo permette anche di separare la presentazione e il design, quindi il codice è facile da gestire e mantenere.
Tenete presente che gli stili in linea e incorporati possono sovrascrivere gli stili impostati nel foglio di stile esterno.
Tag Font o Stili CSS: Pro e Contro
I due metodi principali per cambiare i colori dei font HTML sono l’utilizzo del tag font o degli stili CSS. Entrambi questi metodi hanno i loro pro e contro.
Pro e Contro dei Tag Font HTML
Il tag font HTML è facile da usare, quindi questo è un pro a suo favore. In genere, i CSS sono più complicati e richiedono più tempo per essere imparati rispetto allo scrivere un semplice <font color="purple">. Se avete un vecchio sito web che non usa HTML5, allora il tag font è un metodo valido per cambiare il colore del font.
Anche se il tag font è facile da usare, non dovreste usarlo se il vostro sito web usa l’HTML. Come detto prima, il tag font è ormai deprecato in HTML5. L’utilizzo del codice deprecato dovrebbe essere evitato poiché i browser potrebbero smettere di supportarlo in qualsiasi momento. Questo può portare il vostro sito web a rompersi e a non funzionare correttamente o, peggio, a non essere visualizzato dalle persone che lo visitano.
Pro e Contro dei CSS
I CSS, come il tag font, hanno i loro pro e contro. Il vantaggio più significativo dell’utilizzo dei CSS è che è il modo corretto per cambiare il colore dei font e specificare tutti gli altri stili per il vostro sito web.
Come menzionato prima, permette di separare la presentazione dal design, il che rende il vostro codice più facile da gestire e mantenere.
Il lato negativo è che CSS e HTML5 sono più complessi da apprendere e richiedono più tempo per essere scritti correttamente rispetto al vecchio modo di scrivere il codice.
Tenete presente che con i CSS avete diversi modi per cambiare il colore del font e ognuno di questi metodi ha i suoi pro e contro, come discusso in precedenza.
Suggerimenti per Cambiare il Colore del Carattere HTML
Ora che sapete come cambiare il colore del font HTML, ecco alcuni consigli che vi aiuteranno.
Usare un Selettore di Colori
Invece di scegliere i colori a caso, usate i selettori di colore per selezionare i colori giusti. Il vantaggio di un selettore di colori è che vi darà il nome del colore e i valori esadecimali, RGB e HSL corretti che dovete usare nel vostro codice.
Controllare il Contrasto
Il testo scuro con lo sfondo scuro così come il testo chiaro con lo sfondo chiaro non funzionano bene insieme. Renderanno il testo del vostro sito difficile da leggere. Tuttavia, potete usare uno strumento di verifica di contrasto per assicurarvi che i colori del vostro sito siano accessibili e che il testo sia facile da leggere.
Trovare il Colore Usando il Metodo dell’Ispezione del Codice
Se vedete un colore che vi piace su un sito web, potete ispezionare il codice per ottenere il valore hex, RGB o HSL del colore. In Chrome, tutto quello che dovete fare è puntare il vostro cursore sulla parte della pagina web che volete ispezionare, fare clic con il tasto destro e selezionare Ispeziona. Questo aprirà il pannello di ispezione del codice, dove potete vedere il codice HTML di un sito web e gli stili corrispondenti.
Riepilogo
Cambiare il colore del font HTML può aiutare a migliorare la leggibilità e l’accessibilità del vostro sito web. Può anche aiutarvi a stabilire la coerenza del marchio negli stili del sito web.
Con questa guida avete imparato quattro modi diversi per cambiare il colore del font HTML: con i nomi dei colori, i codici esadecimali, i valori RGB e HSL.
Abbiamo anche spiegato come cambiare il colore del font con il CSS in linea, incorporato ed esterno, come usare il tag font e quali sono i pro e i contro di ogni metodo. A questo punto, dovreste avere una buona comprensione di quale metodo usare per cambiare il colore del font HTML. Ora l’unica cosa che rimane da fare ora è implementare questi suggerimenti sul vostro sito.
Qual è la vostra esperienza con la modifica del colore del font con i CSS e il tag font? Scrivete le vostre opinioni nella sezione dei commenti!
Salman Ravoof é uno sviluppatore web autodidatta, uno scrittore, un creatore e un grande ammiratore del Free and Open Source Software (FOSS). Oltre alla tecnologia, è appassionato di scienza, filosofia, fotografia, arte, gatti e cibo. Per saperne di più su di lui, visitate il suo sito web o contattate Salman su X.
Lascia un commento