HSL colors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding HSL Color Components

Which part of the HSL color hsl(120, 50%, 50%) controls the brightness of the color?

A 50% (Lightness)

B 50% (Saturation)

C None of these

D 120 (Hue)

💡 Hint

Think about which value changes how light or dark the color looks.

In HSL, the Lightness value controls how bright or dark the color appears. A higher lightness means a lighter color, and a lower lightness means a darker color.

📝 Syntax

intermediate

Correct HSL Syntax

Which CSS rule correctly sets the background color to a semi-transparent green using HSL with 50% opacity?

A background-color: hsla(120, 100%, 50%);

B background-color: hsl(120, 100%, 50%, 0.5);

C background-color: hsla(120, 100%, 50%, 0.5);

D background-color: hsl(120, 100%, 50% / 0.5);

💡 Hint

Look for the correct function name and number of parameters.

The hsla() function includes an alpha (opacity) value as the fourth parameter. The hsl() function does not accept a fourth parameter.

❓ rendering

advanced

Visual Result of HSL Color

What color will the following CSS produce as background?

background-color: hsl(0, 100%, 50%);

A Bright green

B Bright red

C Bright blue

D Bright yellow

💡 Hint

Hue 0 degrees corresponds to which color on the color wheel?

Hue 0 degrees in HSL corresponds to red. Saturation 100% and Lightness 50% produce a bright, pure red.

❓ selector

advanced

Selecting Elements by HSL Color in CSS

Which CSS selector will select all elements with a background color exactly set to hsl(240, 100%, 50%)?

A [style$='background-color: hsl(240, 100%, 50%)']

B [style='background-color: hsl(240, 100%, 50%)']

C [style^='background-color: hsl(240, 100%, 50%)']

D [style*='background-color: hsl(240, 100%, 50%)']

💡 Hint

Look for a selector that matches any style attribute containing the exact substring.

The attribute selector [style*='...'] matches elements whose style attribute contains the given substring anywhere. This works for inline styles with that background color.

❓ accessibility

expert

Ensuring Text Contrast with HSL Colors

You set a background color using hsl(200, 70%, 40%). Which text color choice ensures good contrast and accessibility?

A hsl(200, 70%, 90%)

B hsl(200, 70%, 50%)

C hsl(200, 70%, 40%)

D hsl(200, 70%, 30%)

💡 Hint

For good contrast, text should be much lighter or darker than the background.

The background is dark (40% lightness). To ensure readable text, choose a light color (90% lightness) for the text. Colors with similar lightness values reduce readability.

Practice

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