HTML - Colori
I colori sono molto importanti per dare un bell'aspetto al tuo sito web. Puoi specificare i colori a livello di pagina usando il tag <body> oppure puoi impostare i colori per i singoli tag usandobgcolor attributo.
Il tag <body> ha i seguenti attributi che possono essere utilizzati per impostare colori diversi:
bgcolor - imposta un colore per lo sfondo della pagina.
text - imposta un colore per il corpo del testo.
alink - imposta un colore per i collegamenti attivi o per i collegamenti selezionati.
link - imposta un colore per il testo collegato.
vlink- imposta un colore per i collegamenti visitati , ovvero per il testo collegato su cui si è già fatto clic.
Metodi di codifica colore HTML
Sono disponibili tre diversi metodi per impostare i colori nella tua pagina web:
Color names - È possibile specificare direttamente i nomi dei colori come verde, blu o rosso.
Hex codes - Un codice a sei cifre che rappresenta la quantità di rosso, verde e blu che compone il colore.
Color decimal or percentage values - Questo valore viene specificato utilizzando la proprietà rgb ().
Ora vedremo questi schemi di colorazione uno per uno.
Colori HTML - Nomi dei colori
È possibile specificare un nome di colore diretto per impostare il colore del testo o dello sfondo. Il W3C ha elencato 16 nomi di colori di base che verranno convalidati con un validatore HTML, ma ci sono oltre 200 nomi di colori diversi supportati dai principali browser.
Note- Controlla un elenco completo di Nome colore HTML.
W3C Standard 16 colori
Ecco l'elenco dei nomi W3C Standard 16 Colors e si consiglia di utilizzarli.
| Nero | Grigio | Argento | bianca | ||||
| Giallo | Lime | Aqua | Fucsia | ||||
| Rosso | verde | Blu | Viola | ||||
| Marrone | Oliva | Marina Militare | Teal |
Esempio
Ecco gli esempi per impostare lo sfondo di un tag HTML in base al nome del colore:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colori HTML - Codici esadecimali
Un esadecimale è una rappresentazione a 6 cifre di un colore. Le prime due cifre (RR) rappresentano un valore rosso, le due successive sono un valore verde (GG) e le ultime sono il valore blu (BB).
Un valore esadecimale può essere preso da qualsiasi software di grafica come Adobe Photoshop, Paintshop Pro o MS Paint.
Ogni codice esadecimale sarà preceduto da un cancelletto o un cancelletto #. Di seguito è riportato un elenco di pochi colori che utilizzano la notazione esadecimale.
| Colore | Colore HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Esempio
Ecco gli esempi per impostare lo sfondo di un tag HTML in base al codice colore in esadecimale:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colori HTML - Valori RGB
Questo valore di colore viene specificato utilizzando il rgb( )proprietà. Questa proprietà accetta tre valori, uno per rosso, verde e blu. Il valore può essere un numero intero compreso tra 0 e 255 o una percentuale.
Note - Tutti i browser non supportano la proprietà rgb () del colore quindi si consiglia di non utilizzarla.
Di seguito è riportato un elenco per mostrare alcuni colori utilizzando i valori RGB.
| Colore | Colore RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Esempio
Ecco gli esempi per impostare lo sfondo di un tag HTML in base al codice colore utilizzando i valori rgb ():
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colori sicuri per il browser
Ecco l'elenco dei 216 colori che dovrebbero essere i colori più sicuri e indipendenti dal computer. Questi colori vanno dal codice hexa 000000 a FFFFFF e saranno supportati da tutti i computer con tavolozza di 256 colori.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |