Latest web development tutorials
 

W3.CSS Colors


Color Classes

W3.CSS uses color classes, which can be used on any HTML element.

The color classes are inspired by colors used in marketing, road signs, and sticky notes.

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Example

<div class="w3-indigo">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom.</p>
</div>
Try It Yourself »

Color Names

w3-red

w3-pink

w3-purple

w3-deep-purple

w3-indigo

w3-blue

w3-light-blue

w3-cyan

w3-aqua

w3-teal

w3-green

w3-light-green

w3-lime

w3-sand

w3-khaki

w3-yellow

w3-amber

w3-orange

w3-deep-orange

w3-blue-grey

w3-brown

w3-light-grey

w3-grey

w3-dark-grey

w3-black

w3-pale-red

w3-pale-yellow

w3-pale-green

w3-pale-blue


Colored Containers

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


Colored Buttons


Colored Text

Red Purple Blue Green Orange


Colored Borders

Red Green Blue Black Orange


Hover Colors

The w3-hover-color and w3-hover-text-color classes allow the use of all the colors above as hoverable background and text colors:

Red Purple Blue Green Orange


Colored Tables

Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Colored Cards

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have for one to eight people, to typically have four wheels. (Wikipedia)


Text Color Classes

On Black

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-grey

w3-text-brown

w3-text-light-grey

w3-text-grey

w3-text-dark-grey

w3-text-black

w3-text-white

On Grey

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-grey

w3-text-brown

w3-text-light-grey

w3-text-grey

w3-text-dark-grey

w3-text-black

w3-text-white

On White

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-grey

w3-text-brown

w3-text-light-grey

w3-text-grey

w3-text-dark-grey

w3-text-black

w3-text-white