Skip to content
Related Articles

Related Articles

Improve Article
CSS color Property
  • Last Updated : 09 Sep, 2020

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:

  • 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-
  1. color-name: By directly specify the name of the color like blue, green, yellow, white, black etc.

    Syntax:

         color: name-of-the-color; 
    

    Example:






    <!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:

  2. 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:




    <!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:

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

    Syntax:

    color: #RRGGBB;

    Example:




    <!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:

  4. 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:




    <!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:

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

    Synatx:

    color: initial;

    Example:




    <!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:

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

Supported browsers: The browsers supported by 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 :