HTML - HSL and HSLA Colors

Quiz

HSL and HSLA Colors

HSL color values define colors using three parameters: hue (color type), saturation (color intensity), and lightness (brightness). HSLA extends HSL by adding an alpha parameter, which specifies the opacity level of the color.

HSL Color Codes

HTML supports the HSL color model, which stands for Hue, Saturation, and Lightness. It provides a flexible and intuitive way to define colors. The HSL representation allows developers to specify hues, adjust saturation, and control lightness, offering a wider range of color choices.

Hue: It is a degree on the color wheel from 0 to 360, where 0 is red, 120 is green, and 240 is blue.
Saturation: It is a percentage value that indicates how intense or vivid the color is, where 0% means a shade of gray, and 100% is the full color.
Lightness: This is also a percentage value that indicates how bright or dark the color is, where 0% is black, 50% is neither light nor dark, and 100% is white.

Creating HSL Color

To create HSL color, use the hsl() function and pass the values for hue, saturation, and lightness. Following is the syntax to use the hsl() function:

hsl(hue, saturation%, lightness%)

Example

Here's an example demonstrating the use of HSL color in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML HSL Color Example</title>
   <style>
      body {
         font-family: Arial, sans-serif;
         text-align: center;
         padding: 50px;
      }
      .hsl-color-box {
         width: 200px;
         height: 200px;
         margin: 0 auto;
         background-color: hsl(120, 50%, 50%);
         /* HSL representation */
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
      }
   </style>
</head>
<body>
   <div class="hsl-color-box">
      <p>
         This box has an HSL color background 
      </p>
   </div>
</body>
</html>

In this example, the background-color property of the .hsl-color-box class is set using the HSL color representation. The values are as follows:

Hue (H): 120 degrees (green)
Saturation (S): 50%
Lightness (L): 50%

Adjust these values to experiment with different colors. The HSL model offers a more flexible way to work with colors, making it easier to fine-tune and control the appearance of elements on a webpage.

HSLA Color Codes

In HTML, HSLA stands for hue, saturation, lightness, and alpha. It is an extension of the HSL color code with an optional alpha parameter for transparency. This alpha channel specifies how transparent or opaque a color is with a number between 0.0 and 1.0. Here, 0.0 means fully transparent and 1.0 means no transparency.

Creating HSLA Color

To create HSLA colors, use the hsla() function by passing values for hue, saturation, lightness, and alpha for transparency. The hsla() function can be used in CSS files or inside the style attribute in HTML. The following is the syntax to use the hsla() function to create HSLA color:

hsla(hue, saturation%, lightness%, alpha)

Example

In this example, we have set the background color and text color using HSLA color code:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Colors by HSLA code</title>
</head>
<body style = "width:300px; height:100px;">

   <h2 style = "background-color: hsla(0, 0%, 40%, 0.5);">
      Setting the Background using hsla()
   </h2>

   <p style = "color: hsla(0, 0%, 30%, 1.0);">
      The text color of the paragraph is 
      styled using hsla()
   </p>
</body>
</html>

HSL Color Picker

You can use this HSL Color Picker to create your desired color by adjusting the hue, saturation, and lightness levels:

Hue
Saturation
Lightness

Print Page