W3.CSS Color Libraries
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
W3.CSS Color Libraries
❮ Previous
Next ❯
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 |
Example
<div class="w3-highway-red">STOP</div>
Try It Yourself »
Try All »
Download the CSS »
The highway colors are defined 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 |
Example
<div class="w3-safety-red">DANGER</div>
Try It Yourself »
Try All »
Download the CSS »
The US safety colors are defined in Federal Standard 595.
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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 |
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 »
The European signal colors are defined in the RAL Color Standard.
Fashion 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-neutral-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 »
The fashion colors are selected from Colors Trends.
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 |
| w3-vivid-purplish-red |
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 »
The vivid colors are defined in ISCC-NBS.
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 »
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 |
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 »
The camouflage colors are defined in Federal Standard 595.
❮ Previous
Next ❯