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.