matteo

tartero

Web Designer con il pallino per la SEO.

Contattami

Colori HTML: guida completa con tabelle, codici ed esempi pratici

I colori HTML sono uno degli elementi fondamentali per la creazione di pagine web visivamente accattivanti. Che tu stia progettando un sito web, personalizzando un tema WordPress o semplicemente modificando l’aspetto di una pagina, comprendere come funzionano i codici colori HTML è essenziale per ogni sviluppatore e web designer.

In questa guida completa esploreremo tutti gli aspetti dei colori in HTML: dalle notazioni esadecimali ai valori RGB, passando per i nomi standard dei colori. Troverai tabelle colori HTML complete, esempi di codice pronti all’uso e suggerimenti pratici per utilizzare i colori nel tuo progetto web.

Cosa sono i colori HTML e come funzionano

I colori HTML (spesso chiamati anche colori web o colori internet) appartengono allo spazio cromatico sRGB e vengono utilizzati per definire l’aspetto visivo di qualsiasi elemento in una pagina web: testo, sfondo, bordi, pulsanti e molto altro.

Nel linguaggio HTML e nei fogli di stile CSS, i colori possono essere specificati in tre modi principali:

  • Nomi predefiniti dei colori: ed, blue, yello, ecc.
  • Codici esadecimali: #FF0000, #0000FF1A, ecc.
  • Valori RGB/RGBA: rgb(255,0,0), rgba(0,0,255,0.1)

Codice esadecimale colori: la notazione più utilizzata

Il codice esadecimale colori è il formato più diffuso nel web design. Ogni codice colore HTML esadecimale è composto da sei caratteri alfanumerici preceduti dal simbolo #, seguendo lo schema #RRGGBB.

Come leggere i codici esadecimali colori

Ogni coppia di caratteri rappresenta l’intensità di un colore primario:

  • RR = Rosso (Red) – prime due cifre;
  • GG = Verde (Green) – cifre centrali;
  • BB = Blu (Blue) – ultime due cifre.

Il sistema esadecimale utilizza 16 simboli: i numeri da 0 a 9 e le lettere da A a F. Il valore minimo è 00 (nessuna intensità) e il massimo è FF (massima intensità, equivalente a 255 in decimale).

Questo sistema supporta anche la trasparenza, che viene difinita sempre da un sistema di numeri e lettere da aggiungere dopo i valori BB.

  • #0000FF1A

Tabella esadecimale colori: conversione da esadecimale a decimale

EsadecimaleDecimaleEsadecimaleDecimale
0088
1199
22A10
33B11
44C12
55D13
66E14
77F15

Esempi pratici di codici esadecimali

Ecco alcuni esempi per capire meglio come funzionano i codici colori HTML:

  • FF0000 = Rosso puro (rosso al massimo, verde e blu a zero);
  • 00FF00 = Verde lime (verde al massimo, rosso e blu a zero);
  • 0000FF = Blu puro (blu al massimo, rosso e verde a zero);
  • FFFFFF = Bianco (tutti i colori al massimo);
  • 000000 = Nero (tutti i colori a zero);
  • FFF = Forma abbreviata di #FFFFFF (bianco)

Colori RGB HTML: la notazione numerica

La notazione colori RGB HTML esprime i colori attraverso tre valori numerici da 0 a 255, ciascuno corrispondente all’intensità dei tre colori primari: red (rosso), green (verde), blue (blu). La sintassi è: rgb(rosso, verde, blu).

Ad esempio rgb(255,0,0) corrisponde al rosso puro, esattamente come #FF0000.

RGBA: colori con trasparenza

La notazione RGBA aggiunge un quarto parametro, il canale alpha, che controlla la trasparenza del colore. Il valore alpha va da 0 (completamente trasparente) a 1 (completamente opaco).

Esempio: rgba(255,0,0,0.6) produce un rosso con una trasparenza del 40%.

Tabella colori HTML: i 16 colori standard

Le specifiche HTML definiscono 16 colori HTML standard (noti come Web Safe Colors) supportati da tutti i browser. Questa tabella colori HTML completa mostra nome, codice esadecimale e valore RGB di ciascuno:

ColoreNomeEsadecimaleRGB
Black

#000000

rgb(0, 0, 0)
White

#FFFFFF

rgb(255, 255, 255)
Red

#FF0000

rgb(255, 0, 0)
Lime

#00FF00

rgb(0, 255, 0)
Blue

#0000FF

rgb(0, 0, 255)
Yellow

#FFFF00

rgb(255, 255, 0)
Aqua

#00FFFF

rgb(0, 255, 255)
Fuchsia

#FF00FF

rgb(255, 0, 255)
Gray

#808080

rgb(128, 128, 128)
Silver

#C0C0C0

rgb(192, 192, 192)
Maroon

#800000

rgb(128, 0, 0)
Olive

#808000

rgb(128, 128, 0)
Green

#008000

rgb(0, 128, 0)
Purple

#800080

rgb(128, 0, 128)
Teal

#008080

rgb(0, 128, 128)
Navy

#000080

rgb(0, 0, 128)

Palette colori HTML: elenco completo X11

Oltre ai 16 colori standard, esiste una palette colori HTML estesa nota come standard X11, che comprende 140 nomi colori HTML riconosciuti da tutti i browser moderni. Questo elenco colori HTML offre una tavolozza colori HTML molto più ricca per i tuoi progetti.

Colore rosso HTML

Il rosso HTML è uno dei colori più utilizzati per pulsanti, avvisi e call-to-action. Ecco le principali varianti del colore rosso HTML:

ColoreNomeEsadecimaleRGB
Red

#FF0000

rgb(255, 0, 0)
Crimson

#DC143C

rgb(220,20,60)
FireBrick

#B22222

rgb(178,34,34)
DarkRed

#8B0000

rgb(139, 0, 0)
IndianRed

#CD5C5C

rgb(205, 92, 92)
Tomato

#FF6347

rgb(255, 99, 71)

Colore rosa HTML

ColoreNomeEsadecimaleRGB
Pink

#FFC0CB

rgb(255, 192, 203)
LightPink

#FFB6C1

rgb(255, 182, 193)
HotPink

#FF69B4

rgb(255, 105, 180)
DeepPink

#FF1493

rgb(255, 20, 147)
PaleVioletRed

#DB7093

rgb(219, 112, 147)
MediumVioletRed

#C71585

rgb(199, 21, 133)
LavenderBlush

#FFF0F5

rgb(255, 240, 245)
MistyRose

#FFE4E1

rgb(255, 228, 225)

Colore arancione HTML

ColoreNomeEsadecimaleRGB
Orange

#FFA500

rgb(255, 165, 0)
DarkOrange

#FF8C00

rgb(255, 140, 0)
OrangeRed

#FF4500

rgb(255, 69, 0)
Coral

#FF7F50

rgb(255, 127, 80)

Colore giallo HTML

ColoreNomeEsadecimaleRGB
Yellow

#FFFF00

rgb(255, 255, 0)
LightYellow

#FFFFE0

rgb(255, 255, 224)
LemonChiffon

#FFFACD

rgb(255, 250, 205)
LightGoldenrodYellow

#FAFAD2

rgb(250, 250, 210)
PapayaWhip

#FFEFD5

rgb(255, 239, 213)
Moccasin

#FFE4B5

rgb(255, 228, 181)
PeachPuff

#FFDAB9

rgb(255, 218, 185)
PaleGoldenrod

#EEE8AA

rgb(238, 232, 170)
Khaki

#F0E68C

rgb(240, 230, 140)
DarkKhaki

#BDB76B

rgb(189, 183, 107)
Gold

#FFD700

rgb(255, 215, 0)
Goldenrod

#DAA520

rgb(218, 165, 32)
DarkGoldenrod

#B8860B

rgb(184, 134, 11)

Colore verde HTML

ColoreNomeEsadecimaleRGB
Green

#008000

rgb(0, 128, 0)
Lime

#00FF00

rgb(0, 255, 0)
LimeGreen

#32CD32

rgb(50, 205, 50)
ForestGreen

#228B22

rgb(34, 139, 34)
SeaGreen

#2E8B57

rgb(46, 139, 87)
LightGreen

#90EE90

rgb(144, 238, 144)

Colore ciano HTML

ColoreNomeEsadecimaleRGB
Aqua / Cyan

#00FFFF

rgb(0, 255, 255)
LightCyan

#E0FFFF

rgb(224, 255, 255)
DarkCyan

#008B8B

rgb(0, 139, 139)
Teal

#008080

rgb(0, 128, 128)
Aquamarine

#7FFFD4

rgb(127, 255, 212)
MediumAquamarine

#66CDAA

rgb(102, 205, 170)
Turquoise

#40E0D0

rgb(64, 224, 208)
MediumTurquoise

#48D1CC

rgb(72, 209, 204)
DarkTurquoise

#00CED1

rgb(0, 206, 209)
PaleTurquoise

#AFEEEE

rgb(175, 238, 238)
CadetBlue

#5F9EA0

rgb(95, 158, 160)

Colore blu HTML

ColoreNomeEsadecimaleRGB
Blue

#0000FF

rgb(0, 0, 255)
Navy

#000080

rgb(0, 0, 128)
RoyalBlue

#4169E1

rgb(65, 105, 225)
DodgerBlue

#1E90FF

rgb(30, 144, 255)
DeepSkyBlue

#00BFFF

rgb(0, 191, 255)
SkyBlue

#87CEEB

rgb(135, 206, 235)
LightBlue

#ADD8E6

rgb(173, 216, 230)
SteelBlue

#4682B4

rgb(70, 130, 180)

Colore viola HTML

ColoreNomeEsadecimaleRGB
Fuchsia / Magenta

#FF00FF

rgb(255, 0, 255)
Purple

#800080

rgb(128, 0, 128)
DarkMagenta

#8B008B

rgb(139, 0, 139)
DarkViolet

#9400D3

rgb(148, 0, 211)
DarkOrchid

#9932CC

rgb(153, 50, 204)
MediumOrchid

#BA55D3

rgb(186, 85, 211)
Orchid

#DA70D6

rgb(218, 112, 214)
Violet

#EE82EE

rgb(238, 130, 238)
Plum

#DDA0DD

rgb(221, 160, 221)
Thistle

#D8BFD8

rgb(216, 191, 216)
Lavender

#E6E6FA

rgb(230, 230, 250)
Indigo

#4B0082

rgb(75, 0, 130)
BlueViolet

#8A2BE2

rgb(138, 43, 226)
MediumPurple

#9370DB

rgb(147, 112, 219)
SlateBlue

#6A5ACD

rgb(106, 90, 205)
DarkSlateBlue

#483D8B

rgb(72, 61, 139)
MediumSlateBlue

#7B68EE

rgb(123, 104, 238)

Colore marrone HTML

ColoreNomeEsadecimaleRGB
Brown

#A52A2A

rgb(165, 42, 42)
SaddleBrown

#8B4513

rgb(139, 69, 19)
Sienna

#A0522D

rgb(160, 82, 45)
Chocolate

#D2691E

rgb(210, 105, 30)
Peru

#CD853F

rgb(205, 133, 63)
SandyBrown

#F4A460

rgb(244, 164, 96)
BurlyWood

#DEB887

rgb(222, 184, 135)
Tan

#D2B48C

rgb(210, 180, 140)
RosyBrown

#BC8F8F

rgb(188, 143, 143)
Wheat

#F5DEB3

rgb(245, 222, 179)
NavajoWhite

#FFDEAD

rgb(255, 222, 173)
Bisque

#FFE4C4

rgb(255, 228, 196)
BlanchedAlmond

#FFEBCD

rgb(255, 235, 205)
AntiqueWhite

#FAEBD7

rgb(250, 235, 215)

Colore bianco HTML

ColoreNomeEsadecimaleRGB
White

#FFFFFF

rgb(255, 255, 255)
Snow

#FFFAFA

rgb(255, 250, 250)
WhiteSmoke

#F5F5F5

rgb(245, 245, 245)
Ivory

#FFFFF0

rgb(255, 255, 240)
HoneyDew

#F0FFF0

rgb(240, 255, 240)
Cornsilk

#FFF8DC

rgb(255, 248, 220)

Colore grigio HTML

ColoreNomeEsadecimaleRGB
Black

#000000

rgb(0, 0, 0)
DarkSlateGray

#2F4F4F

rgb(47, 79, 79)
DimGray

#696969

rgb(105, 105, 105)
Gray

#808080

rgb(128, 128, 128)
DarkGray

#A9A9A9

rgb(169, 169, 169)
Silver

#C0C0C0

rgb(192, 192, 192)
LightGray

#D3D3D3

rgb(211, 211, 211)
Gainsboro

#DCDCDC

rgb(220, 220, 220)

Come usare i colori in HTML e CSS

Se sviluppi in HTML e CSS, ci sono principalmente due modi per poter modificare il colore degli elementi. Tramite CSS inline, cioè dirittamente nel file HTML all’interno dell’elemento, oppure con un foglio di style CSS collegato al documento HTML.

Il codice CSS inline si inserisce usando l’attributo style="..." e inserendo al suo interno il CSS. Generalmente è sconsigliato usare il CSS inline perché è più difficile da gestire ed è meno efficiente, visto che il codice CSS avrà valore solo nell’elemento in cui è presente il codice. Il codice inline si scrive così:

<div style="background-color: #FF0000;">...</div

Il metodo da utilizzare è con un file CSS dedicato, collegato al file HTML. Il codice si sviluppa selezionado l’elemento con i selettori e applicando gli stili tra parentesti graffe. Si scrive in questo modo:

section {
  background-color: rgb(255,0,0);
}

Impostare lo sfondo in CSS

Per impostare i colori sfondo HTML di una pagina o di un elemento, si usa la proprietà background-color:

Con foglio di stile CSS:

section {
  background-color: rgb(255,0,0);
}

Con CSS inline:

<div style="background-color: #FF0000;">...</div

In contesti di progetti molto vecchi, potresti anche trovare l’attributo bgcolor. L’ho inserito per completezza, ma ad oggi è un attributo deprecato, non viene più utilizzato e i browser moderni potrebbero non riconoscerlo:

<section bgcolor="#FF0000">

Tag colori HTML per il testo

Per colorare del testo, in CSS si usa la proprietà color. Si usa in qesto modo:

section {
 color: red;
}

In linea:

<div style="color: #FF0000;">...</div

Colore tabella HTML

Colorare una tabella non è tanto diverso che colorare gli altri elementi, se per il fatto che dobbia usare i selettori corretti. Il selettore table rappresenta l’intera tabella, th rappresenta l’intestazione (table header), mentre td rappresenta le righe con i dati (table data).

table{
  background-color: #F5F5F5;
}

th{
  background-color: #2C3E50;
  color: white;
}
td{
  border:1px solid #CCCCCC;
}
Foto ritratto di Matteo Tartero

Matteo Tartero

Linkedin

Sono Matteo, un Web Designer Freelance con il pallino per la SEO. Aiuto liberi professionisti e aziende a costruire il proprio spazio digitale e a farsi trovare sul web.

Altri articoli:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *