THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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.

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 Buttons


Colored Text

Red Purple Blue Green Orange


Hover Colors

The w3-hover-color classes allow the use of all the colors above as hoverable colors.

Hover over these buttons:


The w3-hover-text-color classes allow the use of all the w3.css colors as hoverable text colors:

Red Purple Blue Green Orange


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