W3.CSS Color Classes
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
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.</p>
</div>
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.</p>
</div>
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.</p>
</div>
W3.CSS iOS Colors
Example
<div class="w3-ios-dark-blue">
<p>London is the most populous city in the United Kingdom.</p>
</div>
