Tutorials References Menu

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

Try It Yourself »


Hover Color Classes

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