HTML - HSL

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 is a degree on the color wheel from 0 to 360 where, 0 is red, 120 is green, and 240 is blue. Saturation 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 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>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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 intuitive 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 channel 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>
   <table style = "background-color: hsla(9, 100%, 64%, 0.6);">
      <tr>
         <td>
            <p style = "color: hsla(0, 0%, 30%, 1.0);">The text color of the paragraph is styled using hsla()</p>
         </td>
      </tr>
   </table>
</body>
</html>

On execution, the above HTML code will generate one heading and a paragraph with different background colors.

Advertisements