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:
Please Login to comment...