HTML - HSL and HSLA Colors

HSL color values defines 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 in HTML

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 or dark, and 100% is white.

Example

Here's an example demonstrating the use of HSL 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 Colors in HTML

In HTML, HSLA stands for hue, saturation, lightness and alpha. It is an extension of 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.

To specify the HSLA color values in HTML, the hsla() function is used inside the style attribute or CSS file.

Example

In this example, we have set 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 Tool

This is a simple HSL color picker tool. You can adjust Hue, Saturation and Lightness level to pick color of your choice.

Print Page