Bird
Raised Fist0
CSSmarkup~5 mins

HSL colors in CSS - Cheat Sheet & Quick Revision

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
Recall & Review
beginner
What does HSL stand for in CSS colors?
HSL stands for Hue, Saturation, and Lightness. It is a way to describe colors based on these three components.
Click to reveal answer
beginner
Explain the 'Hue' component in HSL colors.
Hue is the color type and is represented as a degree on the color wheel from 0 to 360. For example, 0° is red, 120° is green, and 240° is blue.
Click to reveal answer
beginner
What does 'Saturation' control in HSL colors?
Saturation controls the intensity or purity of the color. 0% means a gray color, and 100% means full color intensity.
Click to reveal answer
beginner
Describe the 'Lightness' value in HSL colors.
Lightness controls how light or dark the color is. 0% is black, 50% is the normal color, and 100% is white.
Click to reveal answer
beginner
How do you write a CSS rule using HSL to set a background color to a bright red?
You can write: background-color: hsl(0, 100%, 50%); This means hue 0° (red), full saturation, and medium lightness.
Click to reveal answer
In HSL, what does a saturation of 0% mean?
AThe color is fully dark
BThe color is fully bright
CThe color is fully gray
DThe color is fully transparent
What hue value represents green in HSL?
A0°
B360°
C240°
D120°
Which lightness value in HSL gives pure white?
A100%
B50%
C0%
D75%
How would you write a CSS color for half-light blue using HSL?
Ahsl(0, 100%, 50%)
Bhsl(240, 100%, 50%)
Chsl(120, 100%, 50%)
Dhsl(240, 50%, 100%)
What happens if you set lightness to 0% in HSL?
AThe color becomes black
BThe color becomes white
CThe color becomes gray
DThe color becomes transparent
Describe how the three parts of HSL (Hue, Saturation, Lightness) work together to create a color.
Think of mixing paint: color type, how strong it is, and how light or dark it looks.
You got /3 concepts.
    Explain how you would change a color from bright red to a pale pink using HSL values.
    Adjust saturation and lightness while keeping the hue the same.
    You got /3 concepts.

      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