W3.CSS Color Classes

❮ Previous Next ❯

W3.CSS Default Colors

The default color classes used in W3.CSS is inspired by Material Design.

Material Design colors reflect the colors used in marketing, road signs, and sticky notes.

The following W3.CSS color classes can be used on any HTML element:

W3.CSS Text Color Classes

The following W3.CSS 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-gray

w3-text-brown

w3-text-light-gray

w3-text-gray

w3-text-dark-gray

w3-text-black

w3-text-white

On Gray

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

w3-text-brown

w3-text-light-gray

w3-text-gray

w3-text-dark-gray

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

w3-text-brown

w3-text-light-gray

w3-text-gray

w3-text-dark-gray

w3-text-black

w3-text-white

Try It Yourself »

Hover Color Classes

The following W3.CSS hover color classes can be used on any HTML element:

Flat UI

Another popular color scheme that can be used in W3.CSS is Flat UI:

Example

<div class="w3-flat-emerald">
<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 » Download the CSS »

London

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

Try It

w3-flat-turquoise

London

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

Try It

w3-flat-green-sea

London

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

Try It

w3-flat-emerald

London

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

Try It

w3-flat-nephritis

London

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

Try It

w3-flat-peter-river

London

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

Try It

w3-flat-belize-hole

London

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

Try It

w3-flat-amethyst

London

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

Try It

w3-flat-wisteria

London

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

Try It

w3-flat-wet-asphalt

London

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

Try It

w3-flat-midnight-blue

London

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

Try It

w3-flat-sun-flower

London

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

Try It

w3-flat-orange

London

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

Try It

w3-flat-carrot

London

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

Try It

w3-flat-pumpkin

London

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

Try It

w3-flat-alizarin

London

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

Try It

w3-flat-pomegranate

London

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

Try It

w3-flat-clouds

London

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

Try It

w3-flat-silver

London

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

Try It

w3-flat-concrete

London

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

Try It

w3-flat-asbestos

Windows Metro UI

Metro is the nickname of Microsoft Design Language (MDL).

Metro is focused on typography, simplified icons, and modern colors.

These examples show how to use Windows Metro colors with W3.CSS:

Example

<div class="w3-metro-light-green">
<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 » Download the CSS »

London

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

Try It

w3-metro-light-green

London

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

Try It

w3-metro-green

London

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

Try It

w3-metro-dark-green

London

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

Try It

w3-metro-magenta

London

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

Try It

w3-metro-light-purple

London

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

Try It

w3-metro-purple

London

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

Try It

w3-metro-dark-purple

London

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

Try It

w3-metro-darken

London

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

Try It

w3-metro-teal

London

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

Try It

w3-metro-light-blue

London

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

Try It

w3-metro-blue

London

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

Try It

w3-metro-dark-blue

London

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

Try It

w3-metro-yellow

London

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

Try It

w3-metro-orange

London

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

Try It

w3-metro-dark-orange

London

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

Try It

w3-metro-red

London

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

Try It

w3-metro-dark-red

W3.CSS Windows 8 Colors

Windows 8 was the first major operating system focused on flat design and modern colors.

Example

<div class="w3-win8-lime">
<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 » Download the CSS »

London

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

Try It

w3-win8-lime

London

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

Try It

w3-win8-green

London

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

Try It

w3-win8-emerald

London

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

Try It

w3-win8-teal

London

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

Try It

w3-win8-cyan

London

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

Try It

w3-win8-blue

London

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

Try It

w3-win8-indigo

London

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

Try It

w3-win8-cobalt

London

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

Try It

w3-win8-violet

London

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

Try It

w3-win8-pink

London

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

Try It

w3-win8-magenta

London

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

Try It

w3-win8-crimson

London

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

Try It

w3-win8-red

London

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

Try It

w3-win8-orange

London

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

Try It

w3-win8-amber

London

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

Try It

w3-win8-yellow

London

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

Try It

w3-win8-brown

London

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

Try It

w3-win8-olive

London

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

Try It

w3-win8-steel

London

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

Try It

w3-win8-mauve

London

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

Try It

w3-win8-taupe

London

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

Try It

w3-win8-sienna

W3.CSS iOS Colors

Example

<div class="w3-ios-dark-blue">
<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 » Download the CSS »