Come modificare il colore del carattere HTML

Quando si tratta di personalizzare il tuo sito, il colore dei caratteri viene spesso trascurato. Nella maggior parte dei casi, i proprietari di siti Web lasciano il colore del carattere predefinito come il nero o qualunque sia lo stile del tema definito per il corpo e il colore del testo dell'intestazione.

Tuttavia, è una buona idea cambiare il colore del carattere HTML sul tuo sito web per diversi motivi. Cambiare il colore del carattere HTML potrebbe sembrare scoraggiante, ma è piuttosto semplice. Esistono diversi modi per cambiare il colore del carattere sul tuo sito web.

In questo post, ti mostreremo diversi modi per cambiare il colore dei caratteri del tuo sito web, oltre a discutere del motivo per cui vorresti farlo in primo luogo.

Perché cambiare il colore del carattere HTML?

Vorresti cambiare il colore del carattere perché così facendo puoi migliorare la leggibilità e l'accessibilità del tuo sito web. Ad esempio, se il tuo sito utilizza una combinazione di colori più scura, lasciare il colore del carattere nero renderebbe difficile la lettura del testo sul tuo sito web.

Un altro motivo per cui dovresti considerare di cambiare il colore del carattere è se utilizzerai un colore più scuro dalla tavolozza dei colori del tuo marchio. Questa è un'altra opportunità per rafforzare il tuo marchio. Costruisce la coerenza del marchio e garantisce che il testo su tutti i tuoi canali di marketing sia lo stesso.

Detto questo, diamo un'occhiata a come puoi definire e modificare il colore del carattere HTML.

Quando si tratta di personalizzare il tuo sito, il colore del carattere viene spesso trascurato... ma è una semplice modifica che può aggiungere molta personalità! Clicca per twittare

Modi per definire il colore

Esistono diversi modi per definire il colore nel web design, inclusi nome, valori RGB, codici esadecimali e valori HSL. Diamo un'occhiata a come funzionano.

Nome colore

I nomi dei colori sono il modo più semplice per definire un colore nei tuoi stili CSS. Il nome del colore si riferisce al nome specifico del colore HTML. Attualmente, sono supportati 140 nomi di colori e puoi utilizzare qualsiasi di questi colori nei tuoi stili. Ad esempio, puoi usare "blu" per impostare il colore di un singolo elemento sul blu.

Tuttavia, lo svantaggio di questo approccio è che non tutti i nomi di colore sono supportati. In altre parole, se utilizzi un colore che non è nell'elenco dei colori supportati, non potrai utilizzarlo nel tuo progetto in base al nome del colore.

Valori RGB e RGBA

Successivamente, abbiamo i valori RGB e RGBA. RGB sta per rosso, verde e blu. Definisce il colore mescolando i valori di rosso, verde e blu, in modo simile a come mescoleresti un colore su una tavolozza reale.

Il valore RGB è simile al seguente: RGB(153,0,255). Il primo numero specifica l'input del colore rosso, il secondo specifica l'input del colore verde e il terzo specifica il blu.

Il valore di ogni input di colore può variare tra 0 e 255, dove 0 significa che il colore non è affatto presente e 255 significa che il colore particolare è alla sua massima intensità.

Il valore RGBA aggiunge un altro valore al mix, e questo è il valore alfa che rappresenta l'opacità. Va da 0 (non trasparente) a 1 (completamente trasparente).

Valore esadecimale

I codici colore esadecimali funzionano in modo simile ai codici RGB. Sono costituiti da numeri da 0 a 9 e lettere da A a F. Il codice esadecimale è simile al seguente: #800080. Le prime due lettere specificano l'intensità del colore rosso, i due numeri centrali specificano l'intensità del colore verde e le ultime due impostano l'intensità del colore blu.

Valori HSL e HSLA

Un altro modo per definire i colori in HTML è utilizzare i valori HSL. HSL sta per tonalità, saturazione e luminosità.

La tonalità utilizza 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 utilizza le percentuali per definire la saturazione del colore. 0 rappresenta il bianco e nero e 100 rappresenta il colore completo.

Infine, la leggerezza utilizza le percentuali in modo simile alla saturazione. In questo caso, 0% rappresenta il nero e il 100% rappresenta il bianco.

Ad esempio, il colore viola che abbiamo utilizzato in questo articolo sarebbe simile al seguente in HSL: hsl(276, 100%, 50%) .

HSL, come RGB, supporta l'opacità. In tal caso, utilizzeresti il ​​valore HSLA in cui A sta per alfa ed è definito in un numero compreso tra 0 e 1. se volessimo ridurre l'opacità dell'esempio viola, useremmo questo codice: hsl(276, 100%, 50%, .85) .

Ora che sai come definire il colore, diamo un'occhiata a diversi modi per cambiare il colore del carattere HTML.

Il vecchio: <font>

Prima che HTML5 fosse introdotto e impostato come standard di codifica, era possibile modificare il colore del carattere utilizzando i tag dei caratteri. Più specificamente, utilizzeresti il ​​tag font con l'attributo color per impostare il colore del testo. Il color è stato specificato 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">This text is purple.</font>

Ed è così che puoi impostare il colore del testo su viola usando il nome del colore.

 <font color="purple">This text is purple.</font>

Tuttavia, il tag <font> è obsoleto in HTML5 e non viene più utilizzato. La modifica del colore del carattere è una decisione progettuale e il design non è lo scopo principale dell'HTML. Pertanto, ha senso che i tag <font> non siano più supportati in HTML5.

Quindi, se il tag <font> non è più supportato, come si cambia il colore del carattere HTML? La risposta è con Cascading Style Sheets o CSS.

Il nuovo: stili CSS

Per modificare il colore del carattere HTML con CSS, utilizzerai la proprietà del colore CSS abbinata al selettore appropriato. CSS ti consente di utilizzare i nomi dei colori, i valori RGB, esadecimali e HSL per specificare il colore. Ci sono tre modi per usare i CSS per cambiare il colore del carattere.

CSS in linea

Il CSS in linea viene aggiunto direttamente al tuo file HTML. Utilizzerai il tag HTML come <p> e poi lo stilerai con la proprietà del colore CSS in questo modo:

 <p>This is a purple paragraph.</p>

Se vuoi usare un valore esadecimale, il tuo codice sarà simile a questo:

 <p>This is a purple paragraph.</p>

Se hai intenzione di utilizzare il valore RGB, lo scriverai in questo modo:

 <p>This is a purple paragraph.</p>

Infine, usando i valori HSL, useresti questo codice:

 <p>This is a purple paragraph.</p>

Gli esempi sopra ti mostrano come cambiare il colore di un paragrafo sul tuo sito web. Ma non sei limitato ai soli paragrafi. Puoi cambiare il colore del carattere delle intestazioni e dei link.

Ad esempio, la sostituzione del tag <p> sopra con <h2> cambierà il colore del testo dell'intestazione, mentre la sua sostituzione con il tag <a> cambierà il colore di quel collegamento. Puoi anche usare l'elemento <span> per colorare qualsiasi quantità di testo.

Iscriviti alla newsletter

Vuoi sapere come abbiamo aumentato il nostro traffico oltre il 1000%?

Unisciti a oltre 20.000 altri che ricevono la nostra newsletter settimanale con suggerimenti per esperti di WordPress!

Iscriviti ora

Se vuoi cambiare il colore di sfondo dell'intero paragrafo o di un'intestazione, è molto simile a come cambieresti il ​​colore del carattere. Devi invece utilizzare l'attributo background-color e utilizzare il nome del colore, i valori esadecimali, RGB o HSL per impostare il colore. Ecco un esempio:

<p>

CSS integrato

Il CSS incorporato si trova all'interno dei tag <style> e viene posizionato tra i tag head del documento HTML.

Il codice sarà simile a questo se si desidera utilizzare il nome del colore:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

Il codice sopra cambierà il colore di ogni paragrafo sulla pagina in viola. Simile al metodo CSS in linea, puoi utilizzare diversi selettori per cambiare il colore del carattere delle intestazioni e dei link.

Se vuoi usare il codice esadecimale, ecco come apparirà il codice:

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

L'esempio seguente utilizza i valori RBGA in modo da poter 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 simile a questo:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

CSS esterno

Infine, puoi utilizzare CSS esterni per cambiare il colore del carattere sul tuo sito web. CSS esterno è CSS che viene inserito in un file di foglio di stile separato, solitamente chiamato style.css o stylesheet.css.

Questo foglio di stile è responsabile di tutti gli stili del tuo sito e specifica i colori e le dimensioni dei caratteri, i margini, i riempimenti, le famiglie di caratteri, i colori di sfondo e altro ancora. In breve, il foglio di stile è responsabile dell'aspetto visivo del tuo sito.

Per cambiare il colore del carattere con CSS esterni, dovresti utilizzare i selettori per definire lo stile delle parti di HTML che desideri. Ad esempio, questo codice cambierà tutto il corpo del testo del tuo sito:

 body {color: purple;}

Ricorda, puoi utilizzare i valori RGB, esadecimale e HSL e non solo i nomi dei colori per cambiare il colore del carattere. Se desideri modificare il foglio di stile, ti consigliamo di farlo in un editor di codice.

In linea, incorporata o esterna?

Quindi ora sai come puoi usare i CSS per cambiare il colore del carattere. Ma quale metodo dovresti usare?

Se utilizzi il codice CSS in linea, lo aggiungerai direttamente al tuo file HTML. In generale, questo metodo è adatto per soluzioni rapide. Se vuoi cambiare il colore di uno specifico paragrafo o intestazione su una singola pagina, questo metodo è il modo più veloce e meno complicato per farlo.

Tuttavia, gli stili in linea possono aumentare le dimensioni del tuo file HTML. Più grande è il tuo file HTML, più tempo impiegherà il caricamento della tua pagina web. In aggiunta a ciò, i CSS in linea possono rendere disordinato il tuo HTML. Pertanto, il metodo inline di utilizzare CSS per modificare il colore del carattere HTML è generalmente sconsigliato.

Il CSS incorporato viene posizionato tra i tag <head> e all'interno dei tag <style>. Come il CSS in linea, è utile per correzioni rapide e sovrascrivere gli stili specificati in un foglio di stile esterno.

Una distinzione notevole tra gli stili in linea e incorporati è che si applicheranno a qualsiasi pagina su cui vengono caricati i tag head, mentre gli stili in linea si applicano solo alla pagina specifica in cui si trovano, in genere l'elemento a cui stanno puntando su quella pagina.

L'ultimo metodo, CSS esterno, utilizza un foglio di stile dedicato per definire i tuoi stili visivi. In generale, è meglio utilizzare un foglio di stile esterno per conservare tutti i tuoi stili in un unico posto, da dove sono facili da modificare. Questo separa anche la presentazione e il design, quindi il codice è facile da gestire e mantenere.

Tieni presente che gli stili in linea e incorporati possono sovrascrivere gli stili impostati nel foglio di stile esterno.

Tag dei caratteri o stili CSS: pro e contro

I due metodi principali per modificare i colori dei caratteri HTML consistono nell'utilizzare il tag del carattere o gli stili CSS. Entrambi questi metodi hanno i loro pro e contro.

Tag font HTML pro e contro

Il tag font HTML è facile da usare, quindi è un professionista a suo favore. In genere, CSS è più complicato e richiede più tempo per essere appreso rispetto alla digitazione <font color="purple"> . Se hai un sito Web più vecchio che non utilizza HTML5, il tag font è un metodo praticabile per cambiare il colore del carattere.

Anche se il tag font è facile da usare, non dovresti usarlo se il tuo sito web utilizza HTML. Come accennato in precedenza, il tag font è stato deprecato in HTML5. L'utilizzo di codice deprecato dovrebbe essere evitato poiché i browser potrebbero smettere di supportarlo in qualsiasi momento. Ciò può portare alla rottura e al mancato funzionamento del tuo sito Web o, peggio, alla mancata visualizzazione per i tuoi visitatori.

CSS Pro e Contro

I CSS, come il tag font, hanno i suoi pro e contro. Il vantaggio più significativo dell'utilizzo dei CSS è che è il modo corretto per cambiare il colore del carattere e specificare tutti gli altri stili per il tuo sito web.

Come accennato in precedenza, separa la presentazione dalla progettazione, il che semplifica la gestione e la manutenzione del codice.

Sul lato negativo, CSS e HTML5 possono richiedere tempo per imparare e scrivere correttamente rispetto al vecchio modo di scrivere codice.

Tieni presente che con i CSS hai diversi modi per cambiare il colore del carattere e ognuno di questi metodi ha i suoi pro e contro, come discusso in precedenza.

Suggerimenti per la modifica del colore del carattere HTML

Ora che sai come cambiare il colore del carattere HTML, ecco alcuni suggerimenti che ti aiuteranno.

Usa un selettore colore

Invece di scegliere i colori in modo casuale, usa i selettori di colore per selezionare i colori giusti. Il vantaggio di un selettore colore è che ti darà il nome del colore e i valori esadecimali, RGB e HSL corretti che devi usare nel tuo codice.

Controlla il contrasto

Il testo scuro con sfondo scuro e il testo chiaro con sfondo chiaro non funzionano bene insieme. Renderanno il testo del tuo sito difficile da leggere. Tuttavia, puoi utilizzare un controllo del contrasto per assicurarti che i colori del tuo sito siano accessibili e che il testo sia di facile lettura.

Trova il colore usando il metodo Ispeziona

Se vedi un colore che ti piace su un sito web, puoi controllare il codice per ottenere il valore esadecimale, RGB o HSL del colore. In Chrome, tutto ciò che devi fare è puntare il cursore sulla parte della pagina Web che desideri ispezionare, fare clic con il pulsante destro del mouse e selezionare Ispeziona . Questo aprirà il pannello di ispezione del codice, dove puoi vedere il codice HTML di un sito Web e gli stili corrispondenti.

Vuoi cambiare il colore del carattere sul tuo sito? È semplice! Questa guida ti aiuterà a iniziare ️ Clicca per twittare

Sommario

La modifica del colore del carattere HTML può aiutare a migliorare la leggibilità e l'accessibilità del tuo sito web. Può anche aiutarti a stabilire la coerenza del marchio negli stili del tuo sito web.

In questa guida, hai imparato quattro modi diversi per cambiare il colore del carattere HTML: con nomi di colore, codici esadecimali, valori RGB e HSL.

Abbiamo anche spiegato come modificare il colore del carattere con CSS in linea, incorporato ed esterno e utilizzare il tag del carattere e i pro ei contro di ciascun metodo. A questo punto, dovresti avere una buona comprensione di quale metodo dovresti usare per cambiare il colore del carattere HTML, quindi l'unica cosa che resta da fare ora è implementare questi suggerimenti sul tuo sito.

Cosa ne pensi della modifica del colore del carattere con CSS e tag del carattere? Facci sapere nella sezione commenti!