W3.CSS Colors
Last Updated :
02 Mar, 2021
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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< 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:
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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...