Bird
Raised Fist0
CSSmarkup~5 mins

HSL colors in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the hsl(120, 100%, 50%) color represent in CSS?
easy
A. A bright green color
B. A dark blue color
C. A light red color
D. A gray color

Solution

  1. Step 1: Understand the HSL parameters

    The first value (120) is the hue, which represents green on the color wheel.

  2. Step 2: Interpret saturation and lightness

    Saturation is 100%, meaning full color intensity, and lightness is 50%, meaning normal brightness.

  3. Final Answer:

    A bright green color -> Option A

  4. Quick Check:

    Hue 120° = green, full saturation and medium lightness = bright green [OK]
Hint: Hue 120° means green in HSL colors [OK]
Common Mistakes:
  • Confusing hue degrees with RGB values
  • Mixing up saturation and lightness effects
  • Assuming 100% lightness means white
2. Which of the following is the correct syntax to set a background color using HSL in CSS?
easy
A. background-color: hsl(240, 100%, 50%);
B. background-color: hsl[240, 100%, 50%];
C. background-color: hsl{240, 100%, 50%};
D. background-color: hsl 240, 100%, 50%;

Solution

  1. Step 1: Recall CSS function syntax

    CSS functions use parentheses () with comma-separated values inside.

  2. Step 2: Check each option's syntax

    background-color: hsl(240, 100%, 50%); uses parentheses and commas correctly; others use brackets, braces, or missing parentheses.

  3. Final Answer:

    background-color: hsl(240, 100%, 50%); -> Option A

  4. Quick Check:

    HSL uses parentheses and commas in CSS [OK]
Hint: Use parentheses () with commas for HSL in CSS [OK]
Common Mistakes:
  • Using square brackets or curly braces instead of parentheses
  • Omitting commas between values
  • Writing HSL values without parentheses
3. What color will the following CSS produce?
color: hsl(0, 0%, 50%);
medium
A. Bright red
B. Medium gray
C. Dark blue
D. Light green

Solution

  1. Step 1: Analyze hue and saturation values

    Hue is 0°, but saturation is 0%, meaning no color saturation (gray scale).

  2. Step 2: Interpret lightness value

    Lightness is 50%, which is medium brightness gray.

  3. Final Answer:

    Medium gray -> Option B

  4. Quick Check:

    Saturation 0% means gray, lightness 50% = medium gray [OK]
Hint: Saturation 0% always gives gray, lightness controls brightness [OK]
Common Mistakes:
  • Ignoring saturation and assuming hue affects color
  • Confusing lightness with saturation
  • Thinking 0% saturation still shows color
4. Identify the error in this CSS rule:
p { color: hsl(360, 120%, 50%); }
medium
A. Missing semicolon after color property
B. Hue value cannot be 360
C. Lightness cannot be 50%
D. Saturation cannot be more than 100%

Solution

  1. Step 1: Check hue value range

    Hue can be 0 to 360 degrees; 360 is valid (same as 0).

  2. Step 2: Check saturation and lightness ranges

    Saturation must be between 0% and 100%; 120% is invalid.

  3. Final Answer:

    Saturation cannot be more than 100% -> Option D

  4. Quick Check:

    Saturation max is 100% in HSL [OK]
Hint: Saturation and lightness must be 0%-100% [OK]
Common Mistakes:
  • Thinking hue cannot be 360
  • Ignoring invalid saturation values
  • Assuming missing semicolon causes error here
5. You want to create a smooth color transition from red to green using HSL. Which CSS snippet correctly animates the hue from 0° to 120° while keeping saturation and lightness constant?
hard
A. @keyframes colorChange { from { color: hsl(0, 50%, 100%); } to { color: hsl(120, 50%, 100%); } }
B. @keyframes colorChange { from { color: hsl(0, 100%, 0%); } to { color: hsl(120, 100%, 0%); } }
C. @keyframes colorChange { from { color: hsl(0, 100%, 50%); } to { color: hsl(120, 100%, 50%); } }
D. @keyframes colorChange { from { color: hsl(0, 0%, 50%); } to { color: hsl(120, 0%, 50%); } }

Solution

  1. Step 1: Understand the goal of smooth hue transition

    Hue should animate from 0° (red) to 120° (green) with saturation and lightness fixed.

  2. Step 2: Check each option's saturation and lightness

    @keyframes colorChange { from { color: hsl(0, 100%, 50%); } to { color: hsl(120, 100%, 50%); } } keeps saturation 100% and lightness 50%, which produces vivid colors. Others have incorrect saturation or lightness values causing dull or black colors.

  3. Final Answer:

    @keyframes colorChange { from { color: hsl(0, 100%, 50%); } to { color: hsl(120, 100%, 50%); } } -> Option C

  4. Quick Check:

    Animate hue 0° to 120° with full saturation and medium lightness [OK]
Hint: Keep saturation and lightness constant for smooth hue animation [OK]
Common Mistakes:
  • Changing saturation or lightness during hue animation
  • Using 0% lightness which results in black
  • Using 0% saturation which results in gray