W3.CSS- kleurenbibliotheken
Kleurenbibliotheken
Kleurbibliotheken zijn kleine CSS-bestanden met veelgebruikte kleurwaarden zoals veiligheidsnormen, snelwegkleuren, modekleuren, camouflagekleuren en meer.
Schoolbus
Falcon Ridge Parkway
STOPPEN
Kleurenbibliotheken gebruiken
Kleurenbibliotheken zijn gemakkelijk te gebruiken. Voeg gewoon een link toe naar de kleurenbibliotheek op uw webpagina:
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-colors-highway.css">
Voeg vervolgens een klassenaam toe aan het HTML-element dat u wilt kleuren:
<div class="w3-highway-schoolbus">Schoolbus</div>
<div
class="w3-highway-green">Falcon Ridge Parkway</div>
<div
class="w3-highway-red">STOP</div>
Amerikaanse snelweg kleuren
| w3-snelweg-bruin |
| w3-snelweg-rood |
| w3-snelweg-oranje |
| w3-snelweg-schoolbus |
| w3-snelweg-geel |
| w3-snelweg-groen |
| w3-snelweg-blauw |
De snelwegkleuren zijn gedefinieerd in Federal Standard 595 .
Amerikaanse veiligheidskleuren
| w3-veiligheidsrood |
| w3-veiligheids-oranje |
| w3-veiligheidsgeel |
| w3-veiligheidsgroen |
| w3-veiligheidsblauw |
| w3-veiligheid-paars |
De Amerikaanse veiligheidskleuren zijn gedefinieerd in Federal Standard 595 .
Europese signaalkleuren
| w3-signaal-geel |
| w3-signaal-oranje |
| w3-signaal-rood |
| w3-signaal-violet |
| w3-signaal-blauw |
| w3-signaal-groen |
| w3-signaal-grijs |
| w3-signaal-bruin |
| w3-signaal-wit |
| w3-signaal-zwart |
Voorbeeld
<div class="w3-signal-red">Stop</div>
<div
class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
Download de CSS »
De Europese signaalkleuren zijn vastgelegd in de RAL Color Standard .
Levendige kleuren
| w3-levendig-roze |
| w3-levendig-rood |
| w3-levendig-oranje |
| w3-levendig-geel |
| w3-levendig-groen |
| w3-levendig-blauw |
| w3-levendig-violet |
| w3-levendig-paars |
| w3-levendig-zwart |
| w3-levendig-wit |
| w3-levendig-geelachtig-roze |
| w3-levendig-roodachtig-oranje |
| w3-levendig-oranje-geel |
| w3-levendig-groenachtig-geel |
| w3-levendig-geel-groen |
| w3-levendig-geelachtig-groen |
| w3-levendig-blauwachtig-groen |
| w3-levendig-groenachtig-blauw |
| w3-levendig-paars-blauw |
| w3-levendig-roodachtig-paars |
| w3-levendig-paars-rood |
Voorbeeld
<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>
Download de CSS »
De levendige kleuren zijn gedefinieerd in ISCC-NBS .
Voedselkleuren
| w3-voedsel-appel |
| w3-food-asperges |
| w3-food-abrikoos |
| w3-food-aubergine |
| w3-food-avocado |
| w3-food-banaan |
| w3-voedselboter |
| w3-food-bosbes |
| w3-food-kers |
| w3-food-chocolade |
| w3-food-cranberry |
| w3-eten-koffie |
| w3-food-egg |
| w3-food-druif |
| w3-food-kiwi |
| w3-food-citroen |
| w3-food-limoen |
| w3-food-mango |
| w3-voedsel-paddenstoel |
| w3-food-mosterd |
| w3-food-mint |
| w3-food-olijf |
| w3-food-oranje |
| w3-food-erwt |
| w3-food-perzik |
| w3-food-peer |
| w3-food-pistache |
| w3-voedsel-pruim |
| w3-food-framboos |
| w3-food-saffraan |
| w3-voedsel-zalm |
| w3-voedsel-munt |
| w3-voedsel-squash |
| w3-voedsel-aardbei |
| w3-food-tomaat |
| w3-voedsel-tarwe |
| w3-voedsel-wijn |
Voorbeeld
<div class="w3-food-apple">Apple</div>
<div
class="w3-food-banana">Banana</div>
Download de CSS »
Camouflage Kleuren
| w3-camo-bruin |
| w3-camo-rood |
| w3-camo-olijf |
| w3-camo-veld |
| w3-camo-aarde |
| w3-camo-zand |
| w3-camo-tan |
| w3-camo-zandsteen |
| w3-camo-donkergroen |
| w3-camo-bos |
| w3-camo-lichtgroen |
| w3-camo-groen |
| w3-camo-donkergrijs |
| w3-camo-grijs |
| w3-camo-zwart |
Voorbeeld
<div class="w3-camo-earth">Camouflaged Truck</div>
<div
class="w3-camo-grey">Camouflaged Ship</div>
Download de CSS »
De camouflagekleuren zijn gedefinieerd in Federal Standard 595 .