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.
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.
<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
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; }!important to ensure they override other styles. When combining with your own CSS, keep this in mind to avoid specificity conflicts.How to Use Color W3.CSS?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.