HTML | Color Styles and HSL

Colors are used to make the page more attractive. Here are the different styles which can be used to create new colors by combination of different colors.

  1. Hexadecimal Style : In this style, we define the color in 6 digit hexadecimal number (from 0 to F). It is denoted by ‘#’. The first two digits indicate red color, next two green color and the last two blue color.

    Examples : If we want all ‘h1’ tags of purple color.


  2. RGB Style [Red Green Blue] : In this we need to give 3 numbers indicating the amount of red, green and blue colors respectively required in the mixed color. The range of each color is from 0 to 255.
    Example: If we want all ‘h1’ tags of green color.

          color:rgb(0, 255, 0);

    Note: rgba(0, 0, 0) is Black color and rgb(255, 255, 255) is White color.

  3. RGBA Style [Red Green Blue Alpha] : This style allows us to make the color transparent according to our will. Alpha indicates the degree of transparency. The range of green, blue and red is from 0 to 255 and that of alpha is from 0 to 1.

    Example: If we want all ‘h1’ tags of green color.

      color:rgba(11, 99, 150, 1);

  4. HSL colors : Here ‘H’ stands for hue, ‘S’ for Saturation and ‘L’ for Lightness. HSL color values are specified as:

    hsl(hue, saturation, lightness)
    • Hue is the color of the image itself. It’s range is from 0 to 360. 0 is for red, 120 is for green and 240 is for blue.
    • Saturation is the intensity/purity of the hue. 0% is for a shade of gray and 100% is the full color.
      When color is fully saturated, the color is considered in purest/truest version.
    • Lightness is the color space’s brightness. 0% is for black, 100% is for white.

    Example : If we apply hue on the above example given in example 1.

      background-color: hsl(200, 20%, 40%);
      color: hsl(300, 30%, 90%);

    In total we have 4096 different color combinations as we have the range of red, green and blue from 00 to FF each so we have 16*16*16 different combinations of colors. Then with hue, saturation and lightness we can achieve even more creative and large number of colors.





<!-- Write HTML code here -->
    <style type="text/css">
            background-color: hsl(200, 50%, 20%);
            color: hsl(200, 20%, 90%);
            color:rgb(0, 255, 0);
            background-color: hsl(150, 20%, 40%);
            color: hsl(360, 30%, 90%);
            color:rgba(11, 99, 150, 1);
            background-color: hsl(250, 45%, 60%);
            color: hsl(175, 35%, 87%);
    <h4>Programming Languages</h4>



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.

Article Tags :
Practice Tags :


Please write to us at to report any issue with the above content.