Open In App
Related Articles

HTML Color Styles and HSL

Improve Article
Save Article
Like Article

Colors are used to make the page more attractive. Here are the different styles which can be used to create new colors by the 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, the next two green color, and the last two blue color.

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

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. 

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. 

  • 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 blue colour. 

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: 


 hsl(hue, saturation, lightness)

       HSL colors value:

  • 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.

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

color:hsl(0, 100%, 50%);
  • 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 of HSLA color value:

hsla(hue, saturation, lightness, alpha)

Example: If we want all ‘h1’ tags of  dark orange color

color:hsla(9, 100%, 64%, 0.8);


<!DOCTYPE html>
    <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%);
            color:hsla(9, 100%, 64%, 0.8));
    <h4>Programming Languages</h4>
    <h3>Interview Series</h3>


Supported Browser:

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 08 Aug, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials