Color W3.CSS
W3.CSS framework color classes reference
W3.CSS Color Classes
W3.CSS is a lightweight CSS framework by W3Schools that provides simple, ready-to-use color classes. Instead of writing custom CSS, you can apply colors directly using class names like w3-blue or w3-red.
W3.CSS color classes follow the Material Design color palette. Each class sets the
background-color property. Add w3-text-{color} to change text color instead. For hover effects use w3-hover-{color}.How to Use
<!-- Include W3.CSS --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <!-- Background color --> <div class="w3-blue">Blue background</div> <!-- Text color --> <p class="w3-text-red">Red text</p> <!-- Hover effect --> <button class="w3-white w3-hover-blue"> Hover me! </button> <!-- Combining classes --> <div class="w3-teal w3-text-white w3-padding"> Teal card with white text </div>
Color Reference Table
Click any row to copy the class name. All 21 W3.CSS color classes are listed below.
| Preview | Class Name | Hex Value | Color Name |
|---|---|---|---|
| w3-red | #f44336 | Red | |
| w3-pink | #e91e63 | Pink | |
| w3-purple | #9c27b0 | Purple | |
| w3-deep-purple | #673ab7 | Deep Purple | |
| w3-indigo | #3f51b5 | Indigo | |
| w3-blue | #2196F3 | Blue | |
| w3-light-blue | #03a9f4 | Light Blue | |
| w3-cyan | #00bcd4 | Cyan | |
| w3-teal | #009688 | Teal | |
| w3-green | #4CAF50 | Green | |
| w3-light-green | #8bc34a | Light Green | |
| w3-lime | #cddc39 | Lime | |
| w3-yellow | #ffeb3b | Yellow | |
| w3-amber | #ffc107 | Amber | |
| w3-orange | #ff9800 | Orange | |
| w3-deep-orange | #ff5722 | Deep Orange | |
| w3-brown | #795548 | Brown | |
| w3-grey | #9e9e9e | Grey | |
| w3-blue-grey | #607d8b | Blue Grey | |
| w3-black | #000000 | Black | |
| w3-white | #ffffff | White |
Try It — Live Preview
Select W3.CSS colors to see them in action on a sample card.
Live Preview
<div class="w3-blue w3-text-white w3-padding w3-round-large"> <h3>Card Title</h3> <p>This is a W3.CSS styled card.</p> </div>
Card Title
This is a W3.CSS styled card using background and text color classes.
Color Swatches
w3-red#f44336
w3-pink#e91e63
w3-purple#9c27b0
w3-deep-purple#673ab7
w3-indigo#3f51b5
w3-blue#2196F3
w3-light-blue#03a9f4
w3-cyan#00bcd4
w3-teal#009688
w3-green#4CAF50
w3-light-green#8bc34a
w3-lime#cddc39
w3-yellow#ffeb3b
w3-amber#ffc107
w3-orange#ff9800
w3-deep-orange#ff5722
w3-brown#795548
w3-grey#9e9e9e
w3-blue-grey#607d8b
w3-black#000000
w3-white#ffffff
Text Color Classes
Every background color has a corresponding text color class. Simply prefix withw3-text- to apply the color to text instead of the background.
/* Background classes */
.w3-red { background-color: #f44336 !important; }
.w3-blue { background-color: #2196F3 !important; }
/* Text color classes */
.w3-text-red { color: #f44336 !important; }
.w3-text-blue { color: #2196F3 !important; }
/* Hover classes */
.w3-hover-red:hover { background-color: #f44336 !important; }
.w3-hover-blue:hover { background-color: #2196F3 !important; }Pro Tip: W3.CSS colors use
!important to ensure they override other styles. When combining with your own CSS, keep this in mind to avoid specificity conflicts.