CSS3 HSL color property

CSS Web Development Front End Technology

HSL stands for hue, saturation, lightness. Here, Huge is a degree of the color wheel, saturation and lightness are percentage values between 0 to 100%.

Example

The following example shows HSL color property:

Live Demo

<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>
   <body>
      <p>HSL colors:</p>
      <p id = "g1">Green</p>
      <p id = "g2">Normal Green</p>
      <p id = "g3">Dark Green</p>
   </body>
</html>

Srinivas Gorla

Published on 02-May-2018 14:19:29

Previous Page Print Page