sass:color module - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to lighten a color by 20%.

SASS

$light-blue: lighten([1], 20%);

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

A#0000ff

B#ff0000

C#00ff00

D#ffff00

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color other than blue will change the output color.

Forgetting to include the color as the first argument.

The lighten() function makes the color lighter by the given percentage. Here, #0000ff is blue, which we lighten by 20%.

2fill in blank

medium

Complete the code to make a color 50% transparent.

SASS

$transparent-red: rgba([1], 0.5);

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

A255, 255, 0

B0, 255, 0

C255, 0, 0

D0, 0, 255

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up RGB values for different colors.

Using values outside the 0-255 range.

The rgba() function takes red, green, blue values and an alpha for transparency. Here, 255, 0, 0 is red, and 0.5 makes it 50% transparent.

3fill in blank

hard

Fix the error in the code to get the hue of a color.

SASS

$hue-value: hue([1]);

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

Argba(255, 0, 0, 1)

B#00ff00

Clighten(#0000ff, 10%)

Dtransparentize(#ff0000, 0.3)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a function call instead of a direct color value.

Using rgba with alpha transparency inside hue().

The hue() function requires a simple color value. Using #00ff00 (green) works correctly. Functions like lighten() or transparentize() return colors but can cause issues if nested improperly.

4fill in blank

hard

Fill both blanks to create a color with 30% saturation and 70% lightness.

SASS

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

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

A120

B30%

C50%

D70%

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up saturation and lightness values.

Using numeric values without % for saturation or lightness.

The hsl() function takes hue, saturation, and lightness. Here, hue is 120 (green), saturation is 30%, and lightness is 70%.

5fill in blank

hard

Fill all three blanks to create a color with hue 240, saturation 100%, and lightness 50%.

SASS

$color: hsl([1], [2], [3]);

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

A120

B100%

C50%

D240

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping hue and saturation values.

Using numeric values without % for saturation or lightness.

The hsl() function uses hue, saturation, and lightness. Hue 240 is blue, saturation 100% is full color, and lightness 50% is normal brightness.