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