Colori HTML: definire il colore per lo sfondo, il testo e la cornice
I colori HTML sono usati per scegliere il colore degli sfondi, dei testi o delle cornici di un documento HTML. Scegliere il colore giusto migliora il design e la leggibilità di un sito web. Per definirli sono disponibili tre opzioni diverse.
Cosa sono i colori HTML?
I colori HTML sono usati per definire i valori di colore di determinati elementi in un documento HTML. Grazie a queste semplici impostazioni effettuate all’interno dell’area body con il tag style puoi modificare lo sfondo HTML, i contorni e i testi in base alle tue esigenze.
- Disponibilità garantita al 99,99%
- Dominio, SSL ed e-mail inclusi
- Assistenza 24/7 in lingua italiana
Quali sono i metodi disponibili per indicare i colori HTML?
Esistono tre metodi diversi, ma tutti validi, per definire i colori HTML. Potrai scoprire le differenze tra queste tre varianti nei paragrafi seguenti.
Nomi dei colori
I browser moderni supportano un totale di 140 nomi di colori. Il nome viene semplicemente inserito all’interno del codice in lingua inglese. Oltre ai valori standard come “blue”, “gray” o “red” sono possibili anche valori più specializzati come “chocolate”, “cornsilk” oppure “DarkSeaGreen”.
Nell’articolo di w3schools trovi un elenco di tutti i nomi dei colori HTML disponibili.
Codici di colore esadecimali
I codici di colore esadecimali sono formati da un numero esadecimale a sei cifre preceduto da cancelletto (#). Si usano i numeri da 0 a 9 e le lettere da A a F. In questo numero esadecimale è espressa a coppie la percentuale dei colori rosso, verde e blu, dove 00 è il valore più piccolo e FF è quello più grande. Il colore blu è quindi espresso dal codice esadecimale #0000FF, mentre il rosa scuro (deep pink) ha il valore di colore #FF1493. Alle due estremità dello spettro dei colori troviamo il nero (#000000) e il bianco (#FFFFFF).
Valori RGB
Oltre che con i codici esadecimali è possibile definire i colori HTML in modo analogo mediante i colori RGB. Anch’essi sono definiti dalle percentuali di rosso, verde e blu; l’intensità di un componente può essere compresa tra 0 e 255. Ad esempio puoi definire il colore blu con il codice rgb(0, 0, 255), il ciano con rgb(0, 255, 255) e il deep pink con rgb(255, 20, 147).
Definire i colori HTML: sintassi ed esempi
Per concludere illustriamo la sintassi e il funzionamento dei singoli metodi per indicare i colori in HTML servendoci di alcuni esempi pratici.
Cambiare i colori degli sfondi
Per cambiare i colori dello sfondo in HTML servono l’attributo style e la proprietà inline CSS background-color. La sintassi si presenta come segue:
<element style="background-color: valoreColore;">Nell’esempio che segue utilizziamo i nomi di colore per impostare il colore dello sfondo del titolo <h2> su “SteelBlue”. Lo sfondo del testo prima viene impostato con il valore di colore “SpringGreen” e poi con “Yellow”:
<body>
<h2 style="background-color: SteelBlue;">
Colori HTML per lo sfondo
</h2>
<p style="background-color: SpringGreen; padding: 5px;">
Qui abbiamo creato un paragrafo il cui colore di sfondo è <b>SpringGreen</b>.
</p>
<p style="background-color: Yellow;">
Questo è un altro paragrafo e il suo colore di sfondo è <b>giallo</b>.
</p>
</body>
Cambiare i colori del testo
Per cambiare il colore dei testi nei siti web si procede in modo analogo. In questo caso però si lavora con la proprietà color. La sintassi è strutturata come segue:
<element style="color: valoreColore;">In questo esempio per indicare i colori utilizziamo i valori esadecimali dei colori HTML. Definiamo il rosso-arancio (#FF4500) come colore del carattere. La prima sezione viene mantenuta di colore blu notte (#191970), la seconda di colore indaco (#4B0082):
<body>
<h2 style="color: #FF4500;">
Questo titolo è rosso-arancio
</h2>
<p style="color: #191970;">
Questo è un paragrafo e il suo testo è <b>blu notte</b>. </p>
<p style="color: #4B0082;">
Questo è un secondo paragrafo con colore del carattere <b>indaco</b>.
</p>
</body>
Definire i valori di colore della cornice
Anche i contorni possono essere modificati a piacere con i colori HTML. Oltre alla proprietà border puoi usare altri parametri per definire la struttura della cornice. In questo caso la sintassi è la seguente:
<element style="border: altri parametri valore di colore;">Nell’esempio utilizziamo ora la terza variante per definire il colore: i valori RGB. La cornice del nostro titolo contiene il valore rgb(178, 34, 34) (FireBrick). I due paragrafi vengono incorniciati con rgb(32, 178, 170) (LightSeaGreen) e rgb(205, 133, 63) (Peru).
<body>
<h2 style="border: 2.5px solid rgb(178, 34, 34);">
La cornice del titolo è rosso fuoco</h2>
<p style="border: 2.5px dashed rgb(32, 178, 170); padding: 5px;">
Questa cornice è <b>verde chiaro</b>.
</p>
<p style="border: 2.5px dotted rgb(205, 133, 63); padding: 5px;">
Questa cornice ha il valore di colore <b>Peru</b>.
</p>
</body>
- Domain Connect gratuito per una configurazione facile del DNS
- Certificato SSL Wildcard gratuito
- Protezione privacy inclusa