THE WORLD'S LARGEST WEB DEVELOPER SITE

W3.CSS Flat UI Colors


Material Design

The default color scheme used in W3.CSS is inspired by Material Design Colors:

Purple

Deep Purple

Purple

Deep Purple

Indigo

Blue

Light Blue

Cyan

Aqua

Teal

Green

Light Green

Lime

Sand

Khaki

Yellow

Amber

Orange

Deep Orange

Blue Gray

Brown

Light Gray

Gray

Dark Gray

Pale Red

Pale Yellow

Pale Green

Pale-Blue


Flat UI Colors

Another popular color scheme is Flat UI Colors:

London

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

Turquoise

London

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

Green Sea

London

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

Emerald

London

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

Nephritis

w3-flat-peter-river
w3-flat-belize-hole
w3-flat-amethyst
w3-flat-wisteria
w3-flat-wet-asphalt
w3-flat-midnight-blue
w3-flat-sunflower
w3-flat-orange
w3-flat-carrot
w3-flat-pumpkin
w3-flat-alizarin
w3-flat-pomegranate
w3-flat-clouds
w3-flat-silver
w3-flat-concrete
w3-flat-asbestos

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 »  Try All »  Download the CSS »

Windows Metro Colors

Another popular color scheme is Windows Metro Colors:

w3-win-metro-light-green
w3-win-metro-green
w3-win-metro-dark-green
w3-win-metro-magenta
w3-win-metro-light-purple
w3-win-metro-purple
w3-win-metro-dark-purple
w3-win-metro-darken
w3-win-metro-teal
w3-win-metro-light-blue
w3-win-metro-blue
w3-win-metro-dark-blue
w3-win-metro-yellow
w3-win-metro-orange
w3-win-metro-dark-orange
w3-win-metro-red
w3-win-metro-dark-red

Example

<div class="w3-win-phone-steel">
  <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 »  Try All »  Download the CSS »



Windows Phone 8 Colors

Another popular color scheme is Windows Phone Colors:

w3-win-phone-lime
w3-win-phone-green
w3-win-phone-emerald
w3-win-phone-teal
w3-win-phone-cyan
w3-win-phone-blue
w3-win-phone-cobalt
w3-win-phone-indigo
w3-win-phone-violet
w3-win-phone-pink
w3-win-phone-magenta
w3-win-phone-crimson
w3-win-phone-red
w3-win-phone-orange
w3-win-phone-amber
w3-win-phone-yellow
w3-win-phone-brown
w3-win-phone-olive
w3-win-phone-steel
w3-win-phone-mauve
w3-win-phone-taupe
w3-win-phone-sienna

Example

<div class="w3-win-phone-steel">
  <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 »  Try All »  Download the CSS »