HSL colors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color using HSL with hue 120.

CSS

background-color: hsl([1], 100%, 50%);

Drag options to blanks, or click blank then click option'

A120

B240

C0

D60

Attempts:

3 left

💡 Hint

Common Mistakes

Using a hue value outside 0-360 range.

Confusing hue with saturation or lightness.

The hue value 120 represents green in HSL color. This sets the background color to bright green.

2fill in blank

medium

Complete the code to set the text color to a semi-transparent red using HSL with 50% lightness.

CSS

color: hsla(0, 100%, [1]%, 0.5);

Drag options to blanks, or click blank then click option'

A50

B25

C75

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100% lightness which results in white.

Confusing saturation with lightness.

Lightness at 50% gives a balanced red color. The alpha 0.5 makes it semi-transparent.

3fill in blank

hard

Fix the error in the HSL color code to make the background blue.

CSS

background-color: hsl([1], 100%, 50%);

Drag options to blanks, or click blank then click option'

A360

B60

C240

D120

Attempts:

3 left

💡 Hint

Common Mistakes

Using 360 which is red, not blue.

Mixing up hue values.

Hue 240 corresponds to blue on the color wheel, so this sets the background to blue.

4fill in blank

hard

Fill both blanks to create a pastel purple background with 70% lightness and 50% saturation.

CSS

background-color: hsl([1], [2]%, 70%);

Drag options to blanks, or click blank then click option'

A270

B50

C100

D30

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100% saturation which makes the color very bright.

Confusing hue values for purple.

Hue 270 is purple. Saturation 50% with lightness 70% creates a soft pastel purple color.

5fill in blank

hard

Fill all three blanks to create a dark olive green color with hue 120, 40% saturation, and 25% lightness.

CSS

background-color: hsl([1], [2]%, [3]%);

Drag options to blanks, or click blank then click option'

A120

B40

C25

D60

Attempts:

3 left

💡 Hint

Common Mistakes

Using 60% lightness which is too bright for dark olive.

Mixing up saturation and lightness percentages.

Hue 120 is green, 40% saturation makes it less bright, and 25% lightness makes it dark, resulting in dark olive green.