CSS Advance Color

    In this CSS advance tutorial, we will be going to learn about RBGA, HSL, and HSLA color values. And we will also be discussing how we can use the opacity property with the color property.

    CSS RGBA Colour value

    RGBA is an extension of RGB color value and it stands for Red, Green, blue, and Alpha value. Here alpha represents the alpha channel which deals with the opacity of the color. RGBA() is a function that accepts values for red, green, blue, and alpha. The values of red, green, and blue vary from 0 to 255 whereas the alpha value varies from 0 to 1. Where 1 represents the opaqueness of the color and 0 represents the complete transparency.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #first {
              background-color: rgba(255,0,0,1);
            }
            #second {
              background-color: rgba(255,0,0,0.5);
            }
            #third {
              background-color: rgba(255,0,0,0.3);
            }
        </style>
    </head>
<body>
    <p id="first">Paragraph 1 with red background and 1 opacity alpha value</p>
    <p id="second">Paragraph 2 with red background and 0.5 opacity alpha value</p>
    <p id="third">Paragraph 3 with red background and 0.3 opacity alpha value</p>
</body>
</html>

    Preview

    Paragraph 1 with red background and 1 opacity alpha value

    Paragraph 2 with red background and 0.5 opacity alpha value

    Paragraph 3 with red background and 0.3 opacity alpha value

    CSS HSL Colour value

    HSL stands for Hue, Saturation, and Lightness, and as its name suggests it specify the hue, saturation and lightness degree of color.

    • hue defines the color format and its value varies from 0 to 360
      • 0 and 360 define red
      • 240 define blue
      • 120 define green
    • The saturation value defines in percentage.
    • The lightness value also defined in percentage where 0% define dark and 100% define whiteness.

    syntax 

    {color: hsl(hue, saturation, lightness);}

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #first {
              background-color: hsl(120,100%,30%);
            }

            #second {
              background-color: hsl(120,100%,50%);
            }

            #third {
              background-color: hsl(120,100%,90%);
            }
        </style>
    </head>
<body>
    <p id="first">Paragraph 1 with green background, 100% saturation and 20% Lightness</p>
    <p id="second">Paragraph 2 with green background, 100% saturation and 50% Lightness</p>
    <p id="third">Paragraph 3 with green background, 100% saturation and 90% Lightness</p>
</body>
</html>

    Preview

    Paragraph 1 with green background, 100% saturation and 20% Lightness

    Paragraph 2 with green background, 100% saturation and 50% Lightness

    Paragraph 3 with green background, 100% saturation and 90% Lightness

    CSS HSLA Colour value

    HSLA stands for Hue, Saturation, Lightness, and Alpha, and it is an extension of HSL color value with alpha opacity.

    Syntax 

    {color: hsla(hue, saturation, lightness, alpha)}

    The alpha represents the opacity of the color 0 define transparency and 1 define opaqueness. And similar to the hsl() color value the range of hsla() hue value varies from 0 to 360.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #first {
              background-color: hsla(240,100%,20%,1);
            }

            #second {
              background-color: hsla(240,100%,20%,0.5);
            }

            #third {
              background-color: hsla(240,100%,20%,0.3);
            }
        </style>
    </head>
<body>
    <p id="first">Paragraph 1 with blue background, 100% saturation, 20% Lightness and 1 opacity</p>
    <p id="second">Paragraph 2 with blue background, 100% saturation, 20% Lightness and 0.5 opacity</p>
    <p id="third">Paragraph 3 with blue background, 100% saturation, 20% Lightness and 0.3 opacity</p>
</body>
</html>

    Preview

    Paragraph 1 with blue background, 100% saturation, 20% Lightness and 1 opacity

    Paragraph 2 with blue background, 100% saturation, 20% Lightness and 0.5 opacity

    Paragraph 3 with blue background, 100% saturation, 20% Lightness and 0.3 opacity

    CSS opacity Property

    The opacity property defines the opacity of the complete element. If we set the opacity to 0.5 for an element then the opacity will be applied on its all other property including background-color, and color properties. So it is always suggested to use alpha color values such as RGBA() or HSLA() when we want to specify opacity for background-color or color only.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #first {
              background-color: red;
              opacity: 1;
            }

            #second {
              background-color: red;
              opacity: 0.5;
            }

            #third {
              background-color: red;
              opacity: 0.3
            }
        </style>
    </head>
<body>
    <p id="first">Paragraph 1 with red background, and 1 opacity</p>
    <p id="second">Paragraph 2 with red background, and 0.5 opacity</p>
    <p id="third">Paragraph 3 with red background and 0.3 opacity</p>
</body>
</html>

    Preview

    Paragraph 1 with red background, and 1 opacity

    Paragraph 2 with red background, and 0.5 opacity

    Paragraph 3 with red background and 0.3 opacity

    Here the opacity not only changes the opaqueness and transparency of the background color but also the transparency of the text color, which is making it difficult to read the <p> text.

    Summary

    • Always use alpha color values RGBA and HSLA when you want to set opacity only for the specified property, not for the complete element.
    • Both HSLA and HSL are the same color value the only difference is HSLA also define the color opacity while HSL not. This same goes for RGBA and RGB.
    • CSS color value supports more than 140 colors names.
    • 1 represents opaqueness and 0 represent complete transparency.
    Previous Tutorial Next Tutorial