Skip to content
Related Articles

Related Articles

CSS color Property

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Aug, 2021
View Discussion
Improve Article
Save Article

The color property in CSS is used to set the color to text, the background of the webpage, and also to set the color of borders.

Syntax

color: color/initial/inherit;

Property Values:

1. color: It will set the color to the text which the programmer specifies in the CSS file. The color can be set to the text in 4 forms-

2. color-name: By directly specify the name of the color like blue, green, yellow, white, black, etc.

Syntax:

     color: name-of-the-color; 

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS color-name property
        </title>
        <style>
            h1 {
                color: black;
            }
            p {
                font-size: 20px;
                color: green;
            }
            .gfg1 {
                font-size: 20px;
                color: red;
            }
            .gfg2 {
                font-size: 20px;
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>
            CSS Color Property
        </h1>
         
<p>
            GEEKSFORGEEKS: A computer science portal
        </p>
 
        <p class="gfg1">
            GEEKSFORGEEKS: A computer science portal
        </p>
 
        <p class="gfg2">
            GEEKSFORGEEKS: A computer science portal
        </p>
 
    </body>
</html>

Output:

3. RGB/RGBA Value: Here R stands for Red, G stands for Green, and B stands for Blue. The color will be assigned to the text by using the range of these values. These values range from 0 to 255.

Syntax:

color: RGB(value, value, value);

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS RGB value property
        </title>
        <style>
            h1 {
                color: RGB(0, 0, 0);
            }
            p {
                color: RGB(0, 150, 0);
            }
            .gfg1 {
                color: RGB(255, 0, 0);
            }
            .gfg2 {
                color: RGB(0, 0, 255);
            }
        </style>
    </head>
    <body>
        <h1>
            CSS color property
        </h1>
         
<p>
            RGB(0, 150, 0)-This is the code for green color.
        </p>
 
        <p class="gfg1">
            RGB(255, 0, 0)-This is the code for red color.
        </p>
 
        <p class="gfg2">
            RGB(0, 0, 255)-This is the code for blue color.
        </p>
 
    </body>
</html>

Output:

4. Hexa-Decimal Value: It represents the value of the color in hexadecimal format. It should start with the prefix #. These values ranges from #000000 to #FFFFFF.

Syntax:

color: #RRGGBB;

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS Hexa-decimal value property
        </title>
        <style>
            body {
                background-color: rgb(200, 200, 200);
            }
            h1 {
                color: #000000;
            }
            p {
                color: #00aa00;
            }
            .gfg1 {
                color: #ff0000;
            }
            .gfg2 {
                color: #0000ff;
            }
        </style>
    </head>
    <body>
        <h1>
            CSS color property
        </h1>
         
<p>
            #00AA00-This is the code for green color.
        </p>
 
        <p class="gfg1">
            #FF0000-This is the code for red color.
        </p>
 
        <p class="gfg2">
            #0000FF-This is the code for blue color.
        </p>
 
    </body>
</html>

Output:

5. HSL/HSLA values: HSL stands for Hue, Saturation, and Lightness. The range of hue will be from (0 to 360 degree), saturation means the Grey effect it ranges from (0 to 100%), and Lightness means the effect of light which ranges from (0 to 100%).

Syntax:

color: HSL(value, value, value);

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS HSL value property
        </title>
        <style>
            body {
                background-color: white;
            }
            h1 {
                color: HSL(0, 0, 0);
            }
            p {
                color: HSL(147, 50%, 47%);
            }
            .gfg1 {
                color: HSL(0, 100%, 50%);
            }
            .gfg2 {
                color: HSL(240, 100%, 50%);
            }
        </style>
    </head>
    <body>
        <h1>
            CSS Color property
        </h1>
         
<p>
            HSL(147, 50%, 47%)-This is the code for green color.
        </p>
 
        <p class="gfg1">
            HSL(0, 100%, 50%)-This is the code for red color.
        </p>
 
        <p class="gfg2">
            HSL(240, 100%, 50%)-This is the code for blue color.
        </p>
 
    </body>
</html>

Output:

6. initial: This value will set the value of the color to its default value.

Syntax:

color: initial;

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS color-name property
        </title>
        <!-- CSS style-->
        <style>
            h1 {
                color: black;
            }
            p {
                font-size: 20px;
                color: initial;
            }
        </style>
    </head>
    <body>
        <h1>
            CSS Color Property
        </h1>
         
<p>
            GEEKSFORGEEKS: A computer science portal
        </p>
 
    </body>
</html>

Output:

7. inherit: It will inherit the property of the color from its parent element.

Supported browsers: The browsers supported by the color property are-

  • Google Chrome 1.0
  • Internet Explorer 3.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!