I colori web sono formati da 3 componenti: il ROSSO, il VERDE e il BLU
Ogni componente è espressa con un numero da 0 a 255
(in esadecimale da 0 a FF)
| componente ROSSA |
componente VERDE |
componente BLU | COLORE SOMMA |
Clicca sulle componenti Rosso, Verde o Blu
e inserisci un numero intero da 0 a 255
(più alto è il numero, più brillante è il colore)
Potrai vedere i 3 colori fondamentali e la loro SOMMA.
Come puoi constatare, il codice del COLORE SOMMA è formato dal simbolo # più 2 cifre per il rosso, 2 cifre per il verde e 2 cifre per il blu.
Il colore di sfondo della pagina web ed il colore del testo non sono elementi
relativi al contenuto, ma allo stile della pagina.
E' bene sistemare queste informazioni all'interno del tag STYLE
nella sezione HEAD della pagina.
L'elemento da selezionare è il body e le proprietà sono background-color (colore di sfondo) e color (colore del testo).
| <head> <style> body { background-color: valore; color: valore; } </style> </head> |
Il valore identificativo del colore è il codice del colore.
| Codice (in HEAD) | Output (del BODY) |
| <head> <style> body { background-color:#000000; color:#FF0000; } </style> </head> |
|
| <head> <style> body { background-color:#FF0000; color:#FFFFFF; } </style> </head> |
|
| <head> <style> body { background-color:#00FF00; color:#0000FF; } </style> </head> |
|
| <head> <style> body { background-color:#0000FF; color:#FFFFFF; } </style> </head> |
|
Attenzione: Non usare lo stesso colore per lo sfondo e per il testo!!! Cerca di avere una combinazione di colori gradevole e leggibile!
Per chi si interessa di matematica: Vuoi vedere come si formano i numeri esadecimali?
Per tutti: Vuoi vedere una grande gamma di colori?
Non sopporti i numeri? Non c'è problema!! Molti colori hanno un semplice nome! (in inglese, però)
| Codice (in HEAD) | Output (del BODY) |
| <head> <style> body { background-color:cyan; color:red; } </style> </head> |
|
| <head> <style> body { background-color:red; color:yellow; } </style> </head> |
|
| <head> <style> body { background-color:violet; color:black; } </style> </head> |
|
| <head> <style> body { background-color:purple; color:white; } </style> </head> |
|
<html>
<head>
<style>
body { background-color: .....; color: .......;}
</style>
</head>
<body>
Questa è la mia prima pagina web colorata
.........
</body>
</html>