HTML | Цветовые стили и 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.

   h1{
    color:#00FF00;
   }
   

   

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.

   h1{
         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.

   h1{
     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:
   Syntax:

   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.

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