Skip to content
Related Articles

Related Articles

HTML | Color Styles and HSL

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 14 Jun, 2022

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. 
 

  • 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. 
     
h1{
 color:#00FF00;
}
 

  • 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. 
     
h1{
      color:rgb(0, 255, 0);
}
 


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

  • 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. 
     
h1{
  color:rgba(11, 99, 150, 1);
 }
 

  • HSL colors : Here ‘H’ stands for hue, ‘S’ for Saturation and ‘L’ for Lightness. HSL color values are specified as: 
    Syntax
     
 hsl(hue, saturation, lightness)

       HSL colors value:

  1. 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.
  2. 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.
  3. Lightness is the color space’s brightness. 0% is for black, 100% is for white.

 

html




<!-- Write HTML code here -->
<head>
    <title>GeeksforGeeks</title>
    <style type="text/css">
        h1{
            color:#0FFFF0;
            background-color: hsl(200, 50%, 20%);
            color: hsl(200, 20%, 90%);
 
        }
        h4{
            color:rgb(0, 255, 0);
            background-color: hsl(150, 20%, 40%);
            color: hsl(360, 30%, 90%);
        }
        li{
            color:rgba(11, 99, 150, 1);
            background-color: hsl(250, 45%, 60%);
            color: hsl(175, 35%, 87%);
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h4>Programming Languages</h4>
    <ul>
        <li>Java</li>
        <li>C++</li>
        <li>C</li>
    </ul>
</body>
</html>

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!