W3.CSS Colors
W3.CSS Default Color Classes
The default color class 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:
