W3.Librerie di colori CSS
Biblioteche di colori
Le librerie di colori sono piccoli file CSS contenenti valori di colore comunemente usati come standard di sicurezza, colori per autostrade, colori alla moda, colori mimetici e altro ancora.
Scuolabus
Falcon Ridge Parkway
FERMARE
Come utilizzare le librerie di colori
Le librerie di colori sono facili da usare. Basta aggiungere un collegamento alla libreria dei colori nella tua pagina web:
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-colors-highway.css">
Quindi, aggiungi un nome di classe all'elemento HTML che desideri colorare:
<div class="w3-highway-schoolbus">Schoolbus</div>
<div
class="w3-highway-green">Falcon Ridge Parkway</div>
<div
class="w3-highway-red">STOP</div>
Colori delle autostrade statunitensi
| w3-autostrada-marrone |
| w3-autostrada-rosso |
| w3-autostrada-arancione |
| w3-autostrada-scuolabus |
| w3-autostrada-giallo |
| w3-verde-autostrada |
| w3-autostrada-blu |
I colori delle autostrade sono definiti nella norma federale 595 .
Colori di sicurezza statunitensi
| w3-rosso-di sicurezza |
| w3-safety-arancione |
| w3-sicurezza-giallo |
| w3-verde di sicurezza |
| w3-blu di sicurezza |
| w3-viola di sicurezza |
I colori di sicurezza statunitensi sono definiti nella norma federale 595 .
Colori dei segnali europei
| w3-segnale-giallo |
| w3-segnale-arancione |
| w3-segnale-rosso |
| w3-segnale-viola |
| w3-segnale-blu |
| w3-segnale-verde |
| w3-grigio-segnale |
| w3-segnale-marrone |
| w3-segnale-bianco |
| w3-segnale-nero |
Esempio
<div class="w3-signal-red">Stop</div>
<div
class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
Scarica il CSS »
I colori segnaletici europei sono definiti nella norma cromatica RAL .
Colori vividi
| w3-rosa-vivace |
| w3-rosso-vivace |
| w3-arancione vivido |
| w3-giallo-vivace |
| w3-verde-vivace |
| w3-blu-vivido |
| w3-vivido-viola |
| w3-viola vivido |
| w3-nero-vivido |
| w3-bianco-vivace |
| w3-rosa-giallastro-vivace |
| w3-vivido-rossastro-arancione |
| w3-giallo-arancione vivido |
| w3-giallo-verdastro-vivace |
| w3-giallo-verde vivo |
| w3-verde-giallastro-vivace |
| w3-verde-bluastro-vivace |
| w3-blu-verdastro-vivido |
| w3-vivido-viola-blu |
| w3-vivido-rossastro-viola |
| w3-rosso-viola-vivace |
Esempio
<div class="w3-vivid-red">
<p>London is the most populous city in the
United Kingdom,
with a metropolitan area of over 9 million
inhabitants.</p>
</div>
Scarica il CSS »
I colori vividi sono definiti in ISCC-NBS .
Coloranti alimentari
| w3-cibo-mela |
| w3-cibo-aspargi |
| w3-cibo-albicocca |
| w3-cibo-melanzane |
| w3-cibo-avocado |
| w3-cibo-banana |
| w3-cibo-burro |
| w3-cibo-mirtillo |
| w3-cibo-ciliegia |
| w3-cioccolato-cibo |
| w3-cibo-mirtillo rosso |
| w3-cibo-caffè |
| w3-cibo-uovo |
| w3-cibo-uva |
| w3-cibo-kiwi |
| w3-cibo-limone |
| w3-cime-lime |
| w3-cibo-mango |
| w3-cibo-fungo |
| w3-cibo-senape |
| w3-cibo-menta |
| w3-cibo-oliva |
| w3-cibo-arancia |
| w3-cibo-pisello |
| w3-cibo-pesca |
| w3-cibo-pera |
| w3-cibo-pistacchio |
| w3-cibo-prugna |
| w3-cibo-lampone |
| w3-cibo-zafferano |
| w3-cibo-salmone |
| w3-cibo-menta verde |
| w3-cibo-zucca |
| w3-cibo-fragola |
| w3-food-pomodoro |
| w3-cibo-grano |
| w3-cibo-vino |
Esempio
<div class="w3-food-apple">Apple</div>
<div
class="w3-food-banana">Banana</div>
Scarica il CSS »
Colori mimetici
| w3-camo-marrone |
| w3-rosso-mimetico |
| w3-camo-oliva |
| w3-campo mimetico |
| w3-camo-terra |
| w3-mimetico-sabbia |
| w3-mimetico-abbronzatura |
| w3-camo-arenaria |
| w3-mimetico-verde-scuro |
| w3-camo-foresta |
| w3-mimetico-verde chiaro |
| w3-mimetico-verde |
| w3-mimetico-grigio-scuro |
| w3-camo-grigio |
| w3-mimetico-nero |
Esempio
<div class="w3-camo-earth">Camouflaged Truck</div>
<div
class="w3-camo-grey">Camouflaged Ship</div>
Scarica il CSS »
I colori mimetici sono definiti nella norma federale 595 .