HTML | Color Styles and HSL

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:
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.
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.
 
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
ysachin2314
sanayush1357
HTML-Basics
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?