W3.CSS provides a variety of predefined color classes that you can apply to elements. The colors are named based on their shades, such as w3-red, w3-green, and w3-blue.
<div class="w3-container w3-green">
<p>This container has a green background.</p>
</div>
<div class="w3-container w3-yellow">
<p>This container has a yellow background.</p>
</div>
W3.CSS also supports lighter and darker shades of colors using additional classes like w3-red-light and w3-red-dark.
<div class="w3-container w3-blue-light">
<p>This is a light blue container.</p>
</div>
<div class="w3-container w3-blue-dark">
<p>This is a dark blue container.</p>
</div>