THE WORLD'S LARGEST WEB DEVELOPER SITE

W3.CSS Colors


Red

Green

Blue

Black

Pink

Teal

Indigo

Brown

Orange

Cyan

Purple

Gray

Yellow

Lime

Khaki

Lightgray

W3.CSS colors are inspired by the colors used in marketing, road signs, and sticky notes.


Coloring HTML Elements

The w3-color and w3-text-color classes can be used to color any HTML element:

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)


Background Colors

The w3-color classes set the background color for any HTML 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 Colors

The w3-text-color classes set the text color of any HTML 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 »


Hover Colors

The w3-hover-color classes define the background hover color for any HTML element:

London

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

The w3-hover-text-color classes define the text hover color for any HTML 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 »