0
0
CSSmarkup~5 mins

HSL colors in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

HSL colors let you pick colors by choosing their hue, saturation, and lightness. This makes it easy to create and adjust colors in a way that feels natural.

When you want to pick colors based on their shade or brightness, like making a color lighter or darker.
When you want to create color themes that are easy to change by adjusting one value.
When you want to animate colors smoothly by changing hue or lightness.
When you want to understand colors better by breaking them into parts you can control.
Syntax
CSS
hsl(hue, saturation%, lightness%)

Hue is a number from 0 to 360 that represents the color angle on the color wheel (like red, green, blue).

Saturation is a percentage that shows how intense the color is (0% is gray, 100% is full color).

Lightness is a percentage that shows how light or dark the color is (0% is black, 100% is white).

Examples
This is bright red. Hue 0 means red, 100% saturation means full color, and 50% lightness means normal brightness.
CSS
color: hsl(0, 100%, 50%);
This is a dark green. Hue 120 means green, saturation full, lightness low for darkness.
CSS
color: hsl(120, 100%, 25%);
This is a light blue with medium saturation and high lightness.
CSS
color: hsl(240, 50%, 75%);
This is a medium gray because saturation is 0%, so no color, just lightness.
CSS
color: hsl(60, 0%, 50%);
Sample Program

This page shows four colored boxes using HSL colors: bright red, dark green, light blue, and medium gray. The background and text also use HSL colors for a soft look. Each box has an accessible label describing its color.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>HSL Colors Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: hsl(210, 30%, 95%);
      color: hsl(210, 50%, 20%);
    }
    .color-box {
      width: 8rem;
      height: 8rem;
      margin: 1rem;
      border-radius: 0.5rem;
      display: inline-block;
      box-shadow: 0 0 5px hsl(0, 0%, 70%);
    }
    .red {
      background-color: hsl(0, 100%, 50%);
    }
    .green {
      background-color: hsl(120, 100%, 25%);
    }
    .blue {
      background-color: hsl(240, 50%, 75%);
    }
    .gray {
      background-color: hsl(0, 0%, 60%);
    }
    h1 {
      color: hsl(210, 80%, 40%);
    }
  </style>
</head>
<body>
  <h1>HSL Colors Example</h1>
  <div class="color-box red" aria-label="Bright red color"></div>
  <div class="color-box green" aria-label="Dark green color"></div>
  <div class="color-box blue" aria-label="Light blue color"></div>
  <div class="color-box gray" aria-label="Medium gray color"></div>
</body>
</html>
OutputSuccess
Important Notes

You can use hsla() to add transparency with an alpha value (0 to 1).

Hue values wrap around, so 0 and 360 are both red.

Using HSL makes it easy to create color variations by changing lightness or saturation.

Summary

HSL colors use hue, saturation, and lightness to define colors.

This model is easy to understand and adjust compared to RGB.

HSL is great for creating color themes and smooth color changes.