Lighten and darken functions in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to lighten the color by 20%.

SASS

$light-color: lighten(#336699, [1]);

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

A5%

B50%

C10%

D20%

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value without the % sign.

Using a value too small to see the effect.

The lighten function takes a color and a percentage to make the color lighter. Here, 20% lightens the color noticeably.

2fill in blank

medium

Complete the code to darken the color by 15%.

SASS

$dark-color: darken(#cc3333, [1]);

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

A5%

B25%

C15%

D10%

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value without the % sign.

Choosing a value that is too large and makes the color almost black.

The darken function makes the color darker by the given percentage. 15% is a moderate darkening.

3fill in blank

hard

Fix the error in the code to correctly lighten the color by 30%.

SASS

$new-color: lighten(#00ff00, [1]);

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

A30

B30%

C0.3

D3%

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the % sign.

Using decimal numbers instead of percentages.

The lighten function requires a percentage with the % sign. Using just 30 (without %) causes an error.

4fill in blank

hard

Fill both blanks to darken the background by 10% and lighten the text by 25%.

SASS

background-color: darken([1], [2]);
color: lighten(#ffffff, 25%);

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

A#123456

B10%

C#abcdef

D20%

Attempts:

3 left

💡 Hint

Common Mistakes

Using an invalid color code.

Using a percentage without the % sign.

The background color is darkened by 10% using darken(#123456, 10%). The text color is lightened by 25% from white.

5fill in blank

hard

Fill all three blanks to create a button with a base color, a lighter hover color, and a darker active color.

SASS

.button {
  background-color: [1];
  &:hover {
    background-color: lighten([2], [3]);
  }
  &:active {
    background-color: darken(#0077cc, 15%);
  }
}

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

A#0055aa

C20%

D10%

Attempts:

3 left

💡 Hint

Common Mistakes

Using different colors for base and hover without lightening.

Using percentages without the % sign.

The base button color is #0055aa. On hover, it lightens by 20%. On active, it darkens by 15%.