W3.CSS Color Libraries
Color Libraries
Color libraries are small CSS files containing commonly used color values like safety standards, highway colors, fashion colors, camouflage colors, and more.
Schoolbus
Falcon Ridge Parkway
STOP
How to Use Color Libraries
Color libraries are easy to use. Just add a link to the color library in your web page:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css">
Then, add a class name to the HTML element you want to color:
<div class="w3-highway-schoolbus">Schoolbus</div>
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-red">STOP</div>
Try It Yourself »
US Highway Colors
| w3-highway-brown |
| w3-highway-red |
| w3-highway-orange |
| w3-highway-schoolbus |
| w3-highway-yellow |
| w3-highway-green |
| w3-highway-blue |
You can read more about Highway Colors in Federal Standard 595.
US Safety Colors
| w3-safety-red |
| w3-safety-orange |
| w3-safety-yellow |
| w3-safety-green |
| w3-safety-blue |
| w3-safety-purple |
You can read more about safety colors in Federal Standard 595.
Camouflage Colors
| w3-camo-brown |
| w3-camo-red |
| w3-camo-olive |
| w3-camo-field |
| w3-camo-earth |
| w3-camo-sand |
| w3-camo-tan |
| w3-camo-sandstone |
| w3-camo-dark-green |
| w3-camo-forest |
| w3-camo-light-green |
| w3-camo-green |
| w3-camo-dark-grey |
| w3-camo-grey |
| w3-camo-black |
You can read more about camouflage colors in Federal Standard 595.
Example
<div class="w3-camo-earth">Camouflaged Truck</div>
<div class="w3-camo-grey">Camouflaged Ship</div>
Try It Yourself »
Try All »
Download the CSS »
Vivid Colors
| w3-vivid-pink |
| w3-vivid-red |
| w3-vivid-orange |
| w3-vivid-yellow |
| w3-vivid-green |
| w3-vivid-blue |
| w3-vivid-violet |
| w3-vivid-purple |
| w3-vivid-black |
| w3-vivid-white |
| w3-vivid-yellowish-pink |
| w3-vivid-reddish-orange |
| w3-vivid-orange-yellow |
| w3-vivid-greenish-yellow |
| w3-vivid-yellow-green |
| w3-vivid-yellowish-green |
| w3-vivid-bluish-green |
| w3-vivid-greenish-blue |
| w3-vivid-purplish-blue |
| w3-vivid-reddish-purple |
| ww3-vivid-purplish-red |
You can read more about vivid colors in ISCC-NBS.
Example
<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>
Try It Yourself »
Download the CSS »
European Signal Colors
| w3-signal-yellow |
| w3-signal-orange |
| w3-signal-red |
| w3-signal-violet |
| w3-signal-blue |
| w3-signal-green |
| w3-signal-grey |
| w3-signal-brown |
| w3-signal-white |
| w3-signal-black |
You can read more about European signal colors in the RAL Color Standard.
Example
<div class="w3-signal-red">Stop</div>
<div class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
Try It Yourself »
Try All »
Download the CSS »
Food Colors
| w3-food-apple |
| w3-food-aspargus |
| w3-food-apricot |
| w3-food-aubergine |
| w3-food-avocado |
| w3-food-banana |
| w3-food-butter |
| w3-food-blueberry |
| w3-food-cherry |
| w3-food-chocolate |
| w3-food-cranberry |
| w3-food-coffee |
| w3-food-egg |
| w3-food-grape |
| w3-food-kiwi |
| w3-food-lemon |
| w3-food-lime |
| w3-food-mango |
| w3-food-mushroom |
| w3-food-mustard |
| w3-food-mint |
| w3-food-olive |
| w3-food-orange |
| w3-food-pea |
| w3-food-peach |
| w3-food-pear |
| w3-food-pistachio |
| w3-food-plum |
| w3-food-raspberry |
| w3-food-saffron |
| w3-food-salmon |
| w3-food-spearmint |
| w3-food-squash |
| w3-food-strawberry |
| w3-food-tomato |
| w3-food-wheat |
| w3-food-wine |
Example
<div class="w3-food-apple">Apple</div>
<div class="w3-food-banana">Banana</div>
Try It Yourself »
Try All »
Download the CSS »
Using w3-colors-2017
| w3-2017-greenery |
| w3-2017-grenadine |
| w3-2017-tawny-port |
| w3-2017-ballet-slipper |
| w3-2017-butterum |
| w3-2017-navy-peony |
| w3-2017-neutreal-grey |
| w3-2017-shaded-spruce |
| w3-2017-golden-lime |
| w3-2017-marina |
| w3-2017-autumn-maple |
| w3-2017-niagra |
| w3-2017-primrose-yellow |
| w3-2017-lapis-blue |
| w3-2017-flame |
| w3-2017-island-paradise |
| w3-2017-pale-dogwood |
| w3-2017-pink-yarrow |
| w3-2017-kale |
| w3-2017-hazelnut |
Example
<div class="w3-2017-greenery">Greenery</div>
<div class="w3-2017-flame">Flame</div>
Try It Yourself »
Try All »
Download the CSS »
