Open In App

HTML Color Styles and HSL

Last Updated : 30 Jan, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

HTML color styles offer various ways to specify colors on a webpage. For Example using HSL (Hue, Saturation, Lightness) allows for intuitive color control, where you adjust hue for the type of color, saturation for intensity, and lightness for brightness. Here are the different styles that can be used to create new colors by the combination of different colors.

Table of Content

Hexadecimal Style:

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

Syntax:

h1 {
  color: #800080;
}

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. 

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

Syntax:

h1{
    color:rgb(0, 255, 0);
}

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.

Syntax:

h1{
  color:rgba(11, 99, 150, 1);
 }

Screenshot-2023-07-17-103013

HSL colors:

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

  • Hue is the color of the image itself. Its 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 for the full color. 
    When color is fully saturated, the color is considered in the purest/truest version.
  • Lightness is the color space’s brightness. 0% is for black, and 100% is for white.

Syntax: 

 hsl (hue, saturation, lightness)
// example
h1{
     color:hsl(0, 100%, 50%);
}

Screenshot-2024-01-09-171934

HSLA Color Values:

HSLA color values are extensions Of HSL color values, with an Alpha Channel added. Where Alpha denotes the Opacity of a color

Syntax:

hsla ( hue, saturation, lightness, alpha)
//example
h1{
    color:hsla(9, 100%, 64%, 0.8);
}

Screenshot-2024-01-09-172034

Example 1: In this example, we will see the implementation of above color styles with an example.

html




<!DOCTYPE html>
<html>
 
<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%);
        }
 
        h3 {
            color: hsla(9, 100%, 64%, 0.8);
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h4>Programming Languages</h4>
    <ul>
        <li>Java</li>
        <li>C++</li>
        <li>C</li>
    </ul>
    <h3>Interview Series</h3>
</body>
 
</html>
 






                        










Output:


Screenshot-2023-07-17-103529


Example2: In this example, we will see the implementation of above color styles with another example.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


 


<head>


    <meta charset="UTF-8">


    <meta name="viewport"


          content="width=device-width, initial-scale=1.0">


    <title>Color Styles</title>


    <style>


        /* Hexadecimal Style */


        #hexColor {


            color: #e74c3c;


        }


 


        /* RGB Style */


        #rgbColor {


            color: rgb(231, 76, 60);


        }


 


        /* RGBA Style */


        #rgbaColor {


            color: rgba(231, 76, 60, 0.7);


        }


 


        /* HSL Style */


        #hslColor {


            color: hsl(9, 83%, 58%);


        }


 


        /* HSLA Style */


        #hslaColor {


            color: hsla(9, 83%, 58%, 0.7);


        }


    </style>


</head>


 


<body>


    <h1 id="rgbColor">GeeksforGeeks</h1>


    <h1 id="hexColor">GeeksforGeeks</h1>


    <h1 id="hslColor">GeeksforGeeks</h1>


    <h1 id="hslaColor">GeeksforGeeks</h1>


    <h1 id="rgbaColor">GeeksforGeeks</h1>


</body>


 


</html>



















                        







                        










Output:


Screenshot-2024-01-09-172829


Supported Browser:


    

  • Google Chrome 1
    • 

  • Microsoft Edge 12
    • 

  • Firefox 1
    • 

  • Opera 9.5
    • 

  • Safari 3.1
    • 




                            
                            
                        


                                                                              

                                        

                                                                                

                                                                

                            

                                  
                                

                                                              

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        HTML Links Hyperlinks
                                    

                                

                                                        

                        

                            

                                        

                                            

                                                

                                                

                                                    

        https://media.geeksforgeeks.org/auth/avatar.png
       
                                                

                                                

                                                    
    

        

            GeeksforGeeks
        

    
                                                

                                                

                                                                                            

                                            
                                        

                                        

                                            
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                        


                                                

                        
                                                 

                                
Similar Reads

                                

                                    
                                

                            

                        


                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

                

        

            

                

                    

                    
                
 
                
                            

                                

                            


                            


            

        
  

        

                




	
		
	
	

	
	
    

	
	

	
	



                
        

    

    

        

            

            

        

    
















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox