# 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/). Grazie a queste semplici impostazioni effettuate all’interno dell’area [body](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-body/) con il [tag style](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-style-html/) puoi modificare lo [sfondo HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/sfondi-html/), i contorni e i testi in base alle tue esigenze. ## 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”. Consiglio Nell’[articolo di w3schools](https://www.w3schools.com/colors/colors_names.asp "w3schools.com: nomi dei colori HTML") 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](https://www.ionos.it/digitalguide/siti-web/web-design/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](https://www.ionos.it/digitalguide/siti-web/web-design/cose-css/) `background-color`. La sintassi si presenta come segue: ```html ``` Nell’esempio che segue utilizziamo i **nomi di colore** per impostare il colore dello sfondo del titolo `

` su “SteelBlue”. Lo sfondo del testo prima viene impostato con il valore di colore “SpringGreen” e poi con “Yellow”: ```html

Colori HTML per lo sfondo

Qui abbiamo creato un paragrafo il cui colore di sfondo è SpringGreen.

Questo è un altro paragrafo e il suo colore di sfondo è giallo.

``` [![Immagine: Colori HTML: esempio di sfondo](https://www.ionos.it/digitalguide/fileadmin/_processed_/4/a/csm_esempio-colore-sfondo-html_266def2170.webp "Colori HTML: esempio di sfondo")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/esempio-colore-sfondo-html.png) Nel browser vediamo i diversi colori di sfondo per i tre elementi. ### 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: ```html ``` 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`): ```html

Questo titolo è rosso-arancio

Questo è un paragrafo e il suo testo è blu notte.

Questo è un secondo paragrafo con colore del carattere indaco.

``` [![Immagine: Colori HTML: esempio di testo](https://www.ionos.it/digitalguide/fileadmin/_processed_/c/f/csm_testo-esempio-colori-html_e63e3bc2e6.webp "Colori HTML: esempio di testo")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/testo-esempio-colori-html.png) Dopo aver eseguito l’esempio di codice vediamo i tre elementi di testo di colore diverso. ### 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: ```html ``` 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). ```html

La cornice del titolo è rosso fuoco

Questa cornice è verde chiaro.

Questa cornice ha il valore di colore Peru.

``` [![Immagine: Colori HTML: esempio di cornice](https://www.ionos.it/digitalguide/fileadmin/_processed_/7/6/csm_cornici-esempio-colori-html_b24cd53b25.webp "Colori HTML: esempio di cornice")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/cornici-esempio-colori-html.png) Le cornici dell’esempio non solo hanno colori HTML diversi, ma sono anche rappresentate con forme diverse. This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/colori-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/colori-html/) for AI/LLM consumption.