W3.CSS Colors
Colors Made Easy
Colors are an important part of web design.
W3.CSS makes it easy to add colors to any HTML element.
London
London is the capital of England.
Example
<div class="w3-container w3-blue">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
Try it Yourself »
Background Colors
W3.CSS color classes can be used to set the background color of any HTML element.
Red
Green
Blue
Example
<div class="w3-panel w3-red">
<p>Red</p>
</div>
<div class="w3-panel w3-green">
<p>Green</p>
</div>
<div class="w3-panel w3-blue">
<p>Blue</p>
</div>
Try it Yourself »
| Class | Color |
|---|---|
w3-red |
Red |
w3-green |
Green |
w3-blue |
Blue |
w3-black |
Black |
The class name tells you the color.
Text Colors
Use w3-text-color classes to change the color of text.
Red Text
Green Text
Blue Text
Example
<h3 class="w3-text-red">Red Text</h3>
<h3 class="w3-text-green">Green Text</h3>
<h3 class="w3-text-blue">Blue Text</h3>
Try it Yourself »
Border Colors
Border colors use classes beginning with w3-border-.
Red border
Green border
Blue border
Gray border
Black border
Example
<div class="w3-panel w3-border w3-border-red">Red border</div>
<div class="w3-panel w3-border w3-border-green">Green border</div>
<div class="w3-panel w3-border w3-border-blue">Blue border</div>
<div class="w3-panel w3-border w3-border-gray">Gray border</div>
<div class="w3-panel w3-border w3-border-black">Black border</div>
Try it Yourself »
Note
The colors gray and grey are interchangeable in all W3.CSS classes.
Hover Colors
W3.CSS can change colors when the mouse pointer moves over an element.
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.
Example
<div class="w3-container w3-orange w3-hover-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 »
Example
<button class="w3-button w3-black w3-hover-red">Red</button>
<button class="w3-button w3-black w3-hover-green">Green</button>
<button class="w3-button w3-black w3-hover-blue">Blue</button>
Try it Yourself »
Combine Colors
Background and text colors can be combined with other W3.CSS classes.
This makes it easy to create attractive user interface elements (like information cards).
Paris
Discover art, architecture, food, and history.
Example
<div class="w3-card">
<div class="w3-container w3-indigo">
<h2>Paris</h2>
</div>
<div class="w3-container">
<p>Discover art, architecture, food, and history.</p>
<button class="w3-button w3-indigo w3-hover-black">Explore Paris</button>
</div>
</div>
Try it Yourself »
Color Classes
W3.CSS includes a wide range of predefined colors.
The standard color classes are designed to work well with white or black text.
Pale Colors
W3.CSS also provides pale variations of Red, Yellow, Green, and Blue.
Examples
<div class="w3-container w3-pale-red">Pale Red</div>
<div class="w3-container w3-pale-yellow">Pale Yellow</div>
<div class="w3-container w3-pale-green">Pale Green</div>
<div class="w3-container w3-pale-blue">Pale Blue</div>
Try it Yourself »
Build with Color
Colors are most useful when they help communicate meaning and organize content.
Below is an example of how colors can communicate status without changing the structure of the HTML.
Success
Your changes were saved.
Warning
Please check your information.
Error
Something went wrong.
Special Colors
More W3.CSS Colors
W3.CSS also includes additional color libraries, themes, and color tools.
Color Themes Color Libraries Color Generator
What You Have Learned
W3.CSS makes it easy to use colors without writing CSS color values.
w3-colorsets a background colorw3-text-colorsets a text colorw3-border-colorsets a border colorw3-hover-colorsets a hover color
More Examples
The w3-color and
w3-text-color classes can be used to color any HTML element:
Backgrounds:
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.
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-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>
<div class="w3-container w3-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-gray">
<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 »
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)
Buttons:
Tables:
| Name | Points |
|---|---|
| Jill Smith | 50 |
| Eve Jackson | 94 |
| Adam Johnson | 67 |
Color libraries
In addition to standard W3.CSS colors, W3.CSS can also use colors from a lot of different color libraries:
Windows Colors:
Click here to Learn more about Windows colors
Fashion Colors:
Yellow
Spruce
Peony
Port
Click here to Learn more about fashion colors
Highway Colors:
Click here to Learn more about color libraries
