Colori CSS

La specifica dei colori avviene utilizzando i nomi dei colori predefiniti, o i valori RGB, HEX, HSL, RGBA, HSLA.

Nome dei colori CSS

Nella CSS, è possibile specificare i colori utilizzando i nomi dei colori:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
GrigioChiaro

Prova personalmente

Supportato da CSS/HTML 140 nomi di colori standard.

Sfondo CSS

Puoi impostare il colore di sfondo degli elementi HTML:

Benvenuti in Cina
La Cina è una grande nazione!

Esempio

<h1 style="background-color:DodgerBlue;">Cina</h1>
<p style="background-color:Tomato;">La Cina è una grande nazione!</p>

Prova personalmente

Colore del testo CSS

Puoi impostare il colore del testo:

Cina

La Cina è una grande nazione!

La Cina, ufficialmente Repubblica Popolare Cinese, è una nazione dell'Asia orientale.

Esempio

<h1 style="color:Tomato;">Cina</h1>
<p style="color:DodgerBlue;">La Cina è una grande nazione!</p>
<p style="color:MediumSeaGreen;">Cina, ufficialmente Repubblica Popolare Cinese...</p>

Prova personalmente

Colore Bordo CSS

Puoi impostare il colore del bordo:

Hello World
Hello World
Hello World

Esempio

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Prova personalmente

Valori di colore CSS

In CSS, è possibile specificare i colori utilizzando valori RGB, HEX, HSL, RGBA o HSLA:

Uguale al nome del colore "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Uguale al nome del colore "Tomato", ma con opacità del 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>Esempio</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Prova personalmente

Scopri di più sui valori di colore

Nel prossimo capitolo, imparerai riguardo RGB、HEX E HSL Ulteriori informazioni.