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 |
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 |
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 Autumn 2019 / Winter 2020
Chili Pepper
Biking Red
Crème de Pêche
Peach Pink
Rocky Road
Fruit Dove
Sugar Almond
Dark Cheddar
Galaxy Blue
Bluestone
Orange Tiger
Eden
The Autumn 2019 / Winter 2020 Classics:
Vanilla Custard
Evening Blue
Paloma
Guacamole
Example
<div class="w3-2019-dark-cheddar">Dark Cheddar</div>
<div class="w3-2019-bluestone">Bluestone</div>
Fashion Colors Spring 2019
Fiesta
Jester Red
Turmeric
Living Coral
Pink Peacock
Pepper Stem
Aspen Gold
Princess Blue
Toffee
Mango Mojito
Terrarium Moss
Sweet Lilac
Soybean
Eclipse
Sweet Corn
Brown Granite
Example
<div class="w3-2019-fiesta">Fiesta</div>
<div class="w3-2019-princess-blue">Princess Blue</div>
The fashion colors are selected from Colors Trends.
Fashion Colors 2018
| w3-2018-red-pear |
| w3-2018-valiant-poppy |
| w3-2018-nebulas-blue |
| w3-2018-ceylon-yellow |
| w3-2018-martini-olive |
| w3-2018-russet-orange |
| w3-2018-ultra-violet |
| w3-2018-crocus-petal |
| w3-2018-limelight |
| w3-2018-quetzal-green |
| w3-2018-sargasso-sea |
| w3-2018-tofu |
| w3-2018-almond-buff |
| w3-2018-quiet-gray |
| w3-2018-meerkat |
| w3-2018-meadowlark |
| w3-2018-cherry-tomato |
| w3-2018-little-boy-blue |
| w3-2018-chili-oil |
| w3-2018-blooming-dahlia |
| w3-2018-arcadia |
| w3-2018-pink-emperador |
| w3-2018-almost-mauve |
| w3-2018-spring-crocus |
| w3-2018-lime-punch |
| w3-2018-sailor-blue |
| w3-2018-harbor-mist |
| w3-2018-warm-sand |
| w3-2018-coconut-milk |
Example
<div class="w3-2018-ultra-violet">Ultra Violet</div>
<div class="w3-2018-cherry-tomato">Cherry Tomato</div>
The fashion colors are selected from Colors Trends.
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>
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.
