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> 
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href= 
        "https://www.w3schools.com/w3css/4/w3.css"> 
  
</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= 
        "https://www.w3schools.com/w3css/4/w3.css"> 
  
</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= 
        "https://www.w3schools.com/w3css/4/w3.css"> 
  
</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= 
        "https://www.w3schools.com/w3css/4/w3.css"> 
</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> 