W3.CSS Colors:

W3.CSS allows many colors to be used directly in the code. Some of them are:

Colours in W3.CSS are much interesting in the way they are used. Very simple predesigned classes are available to which we can use in HTML code. Following classes are available in W3.CSS for coloring elements:

w3-color: to colour backgrounds.
w3-text-color: to colour foregrounds or texts.
w3-hover-color: to change background color on hover.
w3-hover-text-color: to change foreground color or text color on hover.

Using class w3-color:

<div class="w3-orange">
   <h2>India</h2>
   <p>India is a great country. Geographically it is located in South Asia.</p>
</div>

Here, the class w3-orange puts an orange background to the div.
Output:

Using classes w3-color and w3-text-color:

<div class="w3-orange w3-text-teal">
   <h2>India</h2>
   <p>India is a great country. Geographically it is located in South Asia.</p>
</div>

Here, the class w3-orange puts an orange background to the div and, The class w3-text-teal changes the text colour.
Output:

Using class w3-color and w3-hover-color:

<div class="w3-orange w3-hover-green">
   <h2>India</h2>
   <p>India is a great country. Geographically it is located in South Asia.</p>
</div>

Here, the class w3-orange puts an orange background to the div and, The class w3-hover-green changes the background color on hover.
Output:

Using class w3-text-color and w3-text-hover-color:

<div class="w3-text-teal w3-hover-text-orange">
   <h2>India</h2>
   <p>India is a great country. Geographically it is located in South Asia.</p>
</div>

Here, the class w3-text-teal makes the text teal in the div and, The class w3-hover-text-orange changes the text colour on hover.
Output: