Colori HTML
Imposta i colori HTML con nomi, codici hex (#RRGGBB, #RGB, #RRGGBBAA), rgb()/rgba() e hsl()/hsla(). Esempi, tabella dei nomi colore e consigli sul contrasto.
I colori in HTML vengono applicati tramite CSS, sia inline attraverso l'attributo style sia in un foglio di stile. Non si imposta un colore direttamente in HTML — si imposta una proprietà CSS come color (colore del testo), background-color o border-color, assegnandole un valore colore. Questa pagina illustra tutti i formati di valore colore disponibili:
- Nomi di colore — parole chiave come
red,tomatoorebeccapurple. - Esadecimale —
#RRGGBB, la forma abbreviata#RGBe l'8 cifre#RRGGBBAA(con alpha). rgb()/rgba()— canali rosso, verde e blu (più opacità opzionale).hsl()/hsla()— tonalità, saturazione, luminosità (più opacità opzionale).
Tutti questi formati sono intercambiabili: #FF0000, red, rgb(255, 0, 0) e hsl(0, 100%, 50%) descrivono tutti lo stesso rosso puro. Per un riferimento più approfondito sul lato CSS, consulta i capitoli CSS color e CSS background-color.
Codici colore esadecimali
Un codice colore esadecimale è una tripletta hex che rappresenta tre valori separati che definiscono i livelli dei colori componenti. È specificato con una notazione esadecimale (hex) per una miscela di valori di colore Rosso, Verde e Blu. Il valore più basso che può essere assegnato a una delle sorgenti luminose è 0 (hex 00). Il valore più alto è 255 (hex FF).
I valori hex vengono scritti come numeri a sei cifre, preceduti dal segno #. Le lettere usate in una cifra esadecimale possono essere maiuscole o minuscole. Ad esempio, per specificare il colore bianco si può scrivere #FFFFFF o #ffffff.
Esistono altre due forme hex utili da conoscere:
- Abbreviazione
#RGB— quando ciascun canale usa una coppia ripetuta, è possibile abbreviarlo.#FF0000diventa#F00e#FFCC00diventa#FC0. Il browser espande ogni cifra raddoppiandola. - 8 cifre
#RRGGBBAA— aggiunge una coppia finale per il canale alpha (opacità), da00(completamente trasparente) aFF(completamente opaco). Ad esempio,#1c87c980rappresenta il blu#1c87c9a circa il 50% di opacità.
Per aggiungere un colore a un elemento di testo, usa l'attributo style (dove la proprietà color è il tuo codice Hex) o le proprietà CSS corrispondenti come color: o background-color:.
Esempio della proprietà background-color con il valore "hex":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #d5dce8;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:#8ebf42;"> This is a text in green</p>
</body>
</html>Risultato
Puoi usare il nostro strumento Color Picker per esplorare milioni di colori e copiare i relativi valori Hex, RGB e HSL.
Nomi di colore HTML
Per colorare l'elemento di testo usando un nome di colore HTML, inserisci il nome del colore (ad esempio blue) al posto del codice Hex del passaggio precedente.
Esempio della proprietà color con il valore "nome del colore":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: blue;
color: white;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:blue;"> This is a text in blue</p>
</body>
</html>Valori colore RGB
Un valore rgb() combina i canali rosso, verde e blu, ciascuno da 0 a 255 — esattamente lo stesso modello dell'hex, ma scritto in decimale. rgb(255, 0, 0) è rosso, rgb(0, 0, 0) è nero e rgb(255, 255, 255) è bianco.
Per aggiungere un colore a un elemento di testo, usa l'attributo style (dove la proprietà color è il tuo valore RGB) o le proprietà CSS corrispondenti.
Esempio della proprietà background-color con il valore "RGB":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color:rgb(25,25,112);
color: rgb(169,169,169);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:rgb(25,25,112);"> This is a text in blue</p>
</body>
</html>RGBA: aggiungere l'opacità
rgba() estende rgb() con un quarto valore, il canale alpha, che controlla l'opacità da 0 (completamente trasparente) a 1 (completamente opaco). È utile per overlay tintati o sfondi semi-trasparenti in cui si vuole che il livello sottostante sia visibile.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: rgba(25, 25, 112, 0.5);
color: rgb(33, 33, 33);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This box uses a semi-transparent navy background</p>
</div>
</body>
</html>Nel CSS moderno, rgb(25 25 112 / 50%) è la sintassi equivalente con spazi separatori, e l'hex a 8 cifre #19197080 produce lo stesso effetto.
Valori colore HSL e HSLA
hsl() descrive un colore nel modo in cui molti designer lo pensano — tramite tonalità (hue), saturazione e luminosità — il che rende facile creare una famiglia di sfumature correlate modificando un singolo valore.
- La tonalità è un angolo sulla ruota dei colori da
0a360:0(e360) è rosso,120è verde,240è blu. - La saturazione è una percentuale:
0%è grigio,100%è la versione più vivida della tonalità. - La luminosità è una percentuale:
0%è nero,50%è il colore "normale",100%è bianco.
hsla() aggiunge un canale alpha per l'opacità, proprio come rgba().
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
background-color: hsl(210, 79%, 46%);
color: white;
padding: 22px;
}
.faded {
background-color: hsla(210, 79%, 46%, 0.4);
padding: 22px;
}
</style>
</head>
<body>
<div class="solid"><p>hsl background</p></div>
<div class="faded"><p>hsla background with 40% opacity</p></div>
</body>
</html>Poiché luminosità e saturazione sono indipendenti dalla tonalità, HSL è comodo per generare varianti hover o "più scure/più chiare" di un colore brand: si mantiene la tonalità e si abbassa la luminosità.
Colore e accessibilità
Il colore riguarda anche la leggibilità. Le Web Content Accessibility Guidelines (WCAG) richiedono un rapporto di contrasto di almeno:
- 4.5:1 per il testo normale rispetto allo sfondo (livello AA).
- 3:1 per il testo grande (circa 18pt / 24px, o 14pt / 19px in grassetto) e per i componenti dell'interfaccia utente e la grafica.
Due conseguenze da tenere a mente:
- Non fare mai affidamento solo sul colore per trasmettere informazioni — ad esempio, segnala i campi obbligatori del modulo o gli stati di errore anche con testo o un'icona, in modo che gli utenti daltonici e quelli che usano screen reader non vengano esclusi.
- Verifica le tue combinazioni. Un grigio chiaro su bianco può sembrare elegante, ma potrebbe non rispettare il minimo di 4.5:1. Usa il nostro Color Contrast Checker per testare una coppia primo piano/sfondo prima di pubblicarla.
La palette "web-safe" a 216 colori citata nei tutorial più datati (colori costruiti solo dalle coppie hex
00,33,66,99,CC,FF) era un espediente per i display limitati a 256 colori. Gli schermi moderni rendono milioni di colori, quindi questa palette è obsoleta e si dovrebbe scegliere qualsiasi valore si adatti al proprio design.
Elenco dei nomi di colore HTML:
Ecco un elenco di alcuni dei nomi di colore HTML standard:
| Nome colore | Valore esadecimale |
|---|---|
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGrey | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkSlateGrey | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DimGrey | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Gray | #808080 |
| Grey | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenRodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSlateGrey | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | #000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
| Salmon | #FA8072 |
| SandyBrown | #F4A460 |
| SeaGreen | #2E8B57 |
| SeaShell | #FFF5EE |
| Sienna | #A0522D |
| Silver | #C0C0C0 |
| SkyBlue | #87CEEB |
| SlateBlue | #6A5ACD |
| SlateGray | #708090 |
| SlateGrey | #708090 |
| Snow | #FFFAFA |
| SpringGreen | #00FF7F |
| SteelBlue | #4682B4 |
| Tan | #D2B48C |
| Teal | #008080 |
| Thistle | #D8BFD8 |
| Tomato | #FF6347 |
| Turquoise | #40E0D0 |
| Violet | #EE82EE |
| Wheat | #F5DEB3 |
| White | #FFFFFF |
| WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
| YellowGreen | #9ACD32 |
Questi nomi di colore possono essere usati nel codice HTML e CSS per specificare il colore di testo, sfondi, bordi e altri elementi. Per approfondire il lato CSS, leggi i capitoli CSS color, CSS background-color e CSS color names.