W3.CSS — Colors
Basic Colors
W3.CSS provides built-in color classes:
<div class="w3-red">Red</div>
<div class="w3-blue">Blue</div>
<div class="w3-green">Green</div>
<div class="w3-yellow">Yellow</div>
<div class="w3-orange">Orange</div>
<div class="w3-pink">Pink</div>
<div class="w3-purple">Purple</div>
<div class="w3-black">Black</div>
<div class="w3-white">White</div>
<div class="w3-grey">Grey</div>
Background Colors
<div class="w3-container w3-deep-orange">
<p>Deep Orange Background</p>
</div>
<div class="w3-container w3-teal">
<p>Teal Background</p>
</div>
<div class="w3-container w3-indigo">
<p>Indigo Background</p>
</div>
Text Colors
<p class="w3-text-red">Red text</p>
<p class="w3-text-blue">Blue text</p>
<p class="w3-text-green">Green text</p>
<p class="w3-text-orange">Orange text</p>
Color Palette
| Color | Class | Hex |
|---|---|---|
| Red | w3-red | #F44336 |
| Pink | w3-pink | #E91E63 |
| Purple | w3-purple | #9C27B0 |
| Deep Purple | w3-deep-purple | #673AB7 |
| Indigo | w3-indigo | #3F51B5 |
| Blue | w3-blue | #2196F3 |
| Light Blue | w3-light-blue | #03A9F4 |
| Cyan | w3-cyan | #00BCD4 |
| Teal | w3-teal | #009688 |
| Green | w3-green | #4CAF50 |
| Light Green | w3-light-green | #8BC34A |
| Lime | w3-lime | #CDDC39 |
| Yellow | w3-yellow | #FFEB3B |
| Amber | w3-amber | #FFC107 |
| Orange | w3-orange | #FF9800 |
| Deep Orange | w3-deep-orange | #FF5722 |
| Brown | w3-brown | #795548 |
| Grey | w3-grey | #9E9E9E |
| Blue Grey | w3-blue-grey | #607D8B |
Hover Effects
<div class="w3-button w3-red w3-hover-orange">Red to Orange on Hover</div>
<div class="w3-button w3-blue w3-hover-green">Blue to Green on Hover</div>
Mini Practice
Create HTML code that:
- Uses different background colors
- Creates colored text
- Adds hover effects to buttons
- Creates a color palette display
Up Next
Next: Learn about W3.CSS Borders.
Related Topics
Frequently Asked Questions about Colors
What is Colors in W3.CSS?
Colors is a fundamental concept in W3.CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.
How do I learn Colors?
Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Colors.
Why is Colors important in W3.CSS?
Colors is essential for W3.CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.