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:

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

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

Try It Yourself » Try All » Download the CSS »

The European signal colors are defined in the RAL Color Standard.

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 ❯