THE WORLD'S LARGEST WEB DEVELOPER SITE

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

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.



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-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 »

The fashion colors are selected from Colors Trends.


Windows Phone 8 Colors

w3-win-phone-lime
w3-win-phone-green
w3-win-phone-emerald
w3-win-phone-teal
w3-win-phone-cyan
w3-win-phone-cobalt
w3-win-phone-indigo
w3-win-phone-violet
w3-win-phone-pink
w3-win-phone-magenta
w3-win-phone-crimson
w3-win-phone-red
w3-win-phone-orange
w3-win-phone-amber
w3-win-phone-yellow
w3-win-phone-brown
w3-win-phone-olive
w3-win-phone-steel
w3-win-phone-mauve
w3-win-phone-taupe
w3-win-phone-sienna

Example

<div class="w3-win-phone-steel">
  <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 »  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
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.