THE WORLD'S LARGEST WEB DEVELOPER SITE

W3.CSS Colors


Modern Colors

W3.CSS color classes are inspired by modern colors used in marketing, road signs, and sticky notes, like:

Red

Green

Blue

Black

Pink

Teal

Indigo

Brown

Orange

Cyan

Purple

Gray

Yellow

Lime

Khaki

Lightgray


W3.CSS Color Classes

W3.CSS provides the following color classes:

Class Defines
w3-color A background color for an element
w3-text-color A text color for an element
w3-hover-color The hoverable background color for an element
w3-hover-text-color The hoverable text color for an element

*color can be any predefined W3.CSS color name.


Background Colors

The w3-color class is used to set a background color for an element:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.


London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Example

<div class="w3-red">
  <h2>London</h2>
  <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 »

Text Color

The w3-text-color class is used to set the text color for an element:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Example

<div class="w3-text-red">
  <h2>London</h2>
  <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 »

W3.CSS Color Classes

The w3-color classes can be used on any HTML element.


W3.CSS Text Color Classes

The w3-text-color classes can be used on any HTML element. 

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


Hover Colors

The w3-hover-color and w3-hover-text-color classes support all the colors above as hoverable background colors and hoverable text colors.

Use the w3-hover-color class to change the background color when hovering over an element:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Use the w3-hover-text-color class to change the text color when hovering over an element:

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Example

<div class="w3-container w3-orange w3-hover-yellow">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-container w3-orange w3-hover-text-white">
  <h2>London</h2>
  <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 »

Coloring Elements

The w3-color and w3-text-color classes can be used to color every element you like:

Containers:

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Buttons:

Text:

Red Purple Blue Green Orange

Borders:

Red Green Blue Black Orange

Tables:

Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

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 four wheels. (Wikipedia)