W3.CSS Colors
W3.CSS provides us with classes to set the color of font and container. Not only this, there are also classes to change or set the color of the font or container on hover the division or section. All the coloring elements can be broadly be classified into the following parts:
- Background Color
- Text Color
- Hover Background Color
- Hover Text Color
Background Color: The background color classes are as follows: Sr. No Background Color Name Background Color Class 1. Red w3-red 2. Pink w3-pink 3. Purple w3-purple 4. Dark Purple w3-dark-purple 5. Indigo w3-indigo 6. Blue w3-blue 7. Light Blue w3-light-blue 8. Cyan w3-cyan 9. Aqua w3-aqua 10. Teal w3-teal 11. Green w3-green 12. Light Green w3-light-green 13. Lime w3-lime 14. Sand w3-sand 15. Khaki w3-khaki 16. Yellow w3-yellow 17. Amber w3-amber 18. Orange w3-orange 19. Deep Orange w3-deep-orange 20. Blue Gray w3-blue-grey 21. Brown w3-brown 22. Light Gray w3-light-grey 23. Gray w3-grey 24. Dark Gray w3-dark-grey 25. Pale Red w3-pale-red 26. Pale Yellow w3-pale-yellow 27. Pale Green w3-pale-green 28. Pale Blue w3-pale-blue 29. White w3-white 30. Black w3-black
Example: Adding background color on a division.
HTML
<!DOCTYPE html><html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- w3-orange sets the background color orange --> <!-- w3-panel is used to 16px padding from all the direction --> <div class="w3-panel w3-orange"> <p> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div></body> </html> |
Output:
Text Color: The font color classes are as follows: Sr. No. Text Color Name Text Color Class 1. Amber w3-text-amber 2. Aqua w3-text-aqua 3. Blue w3-text-blue 4. Light Blue w3-text-light-blue 5. Brown w3-text-brown 6. Cyan w3-text-cyan 7. Blue Gray w3-text-blue-grey 8. Green w3-text-green 9. Light Green w3-text-light-green 10. Indigo w3-text-indigo 11. Khaki w3-text-khaki 12. Lime w3-text-lime 13. Orange w3-text-orange 14. Deep Orange w3-text-deep-orange 15. Pink w3-text-pink 16. Purple w3-text-purple 17. Deep Purple w3-text-deep-purple 18. Red w3-text-red 19. Sand w3-text-sand 20. Teal w3-text-teal 21. Yellow w3-text-yellow 22. White w3-text-white 23. Black w3-text-black 24. Grey w3-text-grey 25. Light Grey w3-text-light-grey 26. Dark Grey w3-text-dark-grey
Example: Adding font color to a division.
HTML
<!DOCTYPE html><html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- w3-text-orange sets the font color to orange --> <!-- w3-panel is used to 16px padding from all the direction --> <div class="w3-panel w3-text-orange"> <p> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div></body> </html> |
Output:
Hover Background Color: The hoverable background color classes are as follows: Sr. No. Background Color Name Background Color Class 1. Amber w3-hover-amber 2. Aqua w3-hover-aqua 3. Blue w3-hover-blue 4. Light Blue w3-hover-light-blue 5. Brown w3-hover-brown 6. Cyan w3-hover-cyan 7. Blue Grey w3-hover-blue-grey 8. Green w3-hover-green 9. Light Green w3-hover-light-green 10. Indigo w3-hover-indigo 11. Khaki w3-hover-khaki 12. Lime w3-hover-lime 13. Orange w3-hover-orange 14. Deep Orange w3-hover-deep-orange 15. Pink w3-hover-pink 16. Purple w3-hover-purple 17. Deep Purple w3-hover-deep-purple 18. Red w3-hover-red 19. Sand w3-hover-sand 20. Teal w3-hover-teal 21. Yellow w3-hover-yellow 22. White w3-hover-white 23. Black w3-hover-black 24. Grey w3-hover-grey 25. Light Grey w3-hover-light-grey 26. Dark Grey w3-hover-dark-grey 27. Pale Red w3-hover-pale-red 28. Pale Green w3-hover-pale-green 29. Pale Yellow w3-hover-pale-yellow 30. Pale Blue w3-hover-pale-blue
Example: Adding hoverable background color on a division.
HTML
<!DOCTYPE html><html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- w3-hover-amber sets the background color to amber on hover over the division --> <!-- w3-panel is used to 16px padding from all the direction --> <div class="w3-panel w3-text-white w3-pink w3-hover-amber"> <p> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div></body> </html> |
Output:
- Before Hover:
- On Hover:
Hover Text Color: The hoverable text color classes are as follows: Sr. No. Text Color Name Text Color Class 1. Amber w3-hover-text-amber 2. Aqua w3-hover-text-aqua 3. Blue w3-hover-text-blue 4. Light Blue w3-hover-text-light-blue 5. Brown w3-hover-text-brown 6. Cyan w3-hover-text-cyan 7. Blue Grey w3-hover-text-blue-grey 8. Green w3-hover-text-green 9. Light Green w3-hover-text-light-green 10. Indigo w3-hover-text-indigo 11. Khaki w3-hover-text-khaki 12. Lime w3-hover-text-lime 13. Orange w3-hover-text-orange 14. Deep Orange w3-hover-text-deep-orange 15. Pink w3-hover-text-pink 16. Purple w3-hover-text-purple 17. Deep Purple w3-hover-text-deep-purple 18. Red w3-hover-text-red 19. Sand w3-hover-text-sand 20. Teal w3-hover-text-teal 21. Yellow w3-hover-text-yellow 22. White w3-hover-text-white 23. Black w3-hover-text-black 24. Grey w3-hover-text-grey 25. Light Grey w3-hover-text-light-grey 26. Dark Grey w3-hover-text-dark-grey
Example: Adding hoverable text color on a division.
HTML
<!DOCTYPE html><html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href=</head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- w3-hover-text-amber sets the font color to amber on hover over the division --> <!-- w3-panel is used to 16px padding from all the direction --> <div class="w3-panel w3-text-pink w3-hover-text-amber"> <p> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div></body> </html> |
Output:
- Before Hover:
- On Hover:
.png)