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%.

Practice

1. What does the lighten() function do in Sass?

easy

A. Changes a color to grayscale

B. Makes a color darker by decreasing its brightness

C. Inverts the color completely

D. Makes a color lighter by increasing its brightness

Solution

1. Step 1: Understand the purpose of lighten()

   The lighten() function increases the lightness of a color, making it appear lighter.

2. Step 2: Compare with other options

   Other options describe darkening, grayscale, or inversion, which are not what lighten() does.

3. Final Answer:

   Makes a color lighter by increasing its brightness -> Option D

4. Quick Check:

   lighten() = makes color lighter [OK]

Hint: Lighten means make color brighter or lighter [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Thinking lighten() changes color hue
• Assuming lighten() inverts colors

2. Which of the following is the correct syntax to darken a color by 20% in Sass?

easy

A. darken(20%, #3498db)

B. darken(#3498db 20%)

C. darken(#3498db, 20%)

D. darken(#3498db; 20%)

Solution

1. Step 1: Recall function syntax

   The darken() function takes two arguments: a color and a percentage, in that order, separated by a comma.

2. Step 2: Check each option

   darken(#3498db, 20%) matches the correct syntax: darken(#3498db, 20%). Others have wrong order or missing comma/semicolon.

3. Final Answer:

   darken(#3498db, 20%) -> Option C

4. Quick Check:

   darken(color, percent) syntax [OK]

Hint: Function args: color first, then percentage with comma [OK]

Common Mistakes:

• Swapping argument order
• Omitting comma between arguments
• Using semicolon instead of comma

3. What color will be produced by this Sass code?

$base-color: #800000;
$light-color: lighten($base-color, 50%);
body { background-color: $light-color; }

medium

A. A very dark red color

B. A very light pinkish color

C. Pure white

D. Bright green

Solution

1. Step 1: Understand lighten effect on #800000

   The base color #800000 is a dark red. Lightening it by 50% will add a lot of white, making it much lighter and pinkish.

2. Step 2: Eliminate other options

   It won't be dark (B), pure white (C), or green (D) because lighten only adds lightness to the original red color.

3. Final Answer:

   A very light pinkish color -> Option B

4. Quick Check:

   lighten dark red by 50% = light pink [OK]

Hint: Lighten dark red by 50% = light pinkish color [OK]

Common Mistakes:

• Thinking lighten makes color darker
• Confusing lighten with color inversion
• Expecting pure white after lighten

4. Identify the error in this Sass code:

$color: #123456;
$dark: darken($color 30%);
.button { background: $dark; }

medium

A. Missing comma between arguments in darken()

B. Invalid color code #123456

C. darken() cannot be used inside variables

D. Percentage should be without % sign

Solution

1. Step 1: Check darken() function syntax

   The darken() function requires a comma between the color and percentage arguments.

2. Step 2: Identify the missing comma

   In the code, darken($color 30%) lacks a comma, causing a syntax error.

3. Final Answer:

   Missing comma between arguments in darken() -> Option A

4. Quick Check:

   darken(color, percent) needs comma [OK]

Hint: Remember comma separates arguments in functions [OK]

Common Mistakes:

• Omitting comma between function arguments
• Using invalid color codes
• Removing % sign from percentage

5. You want to create a button with a base blue color #007BFF. On hover, the button should become 15% darker. Which Sass code correctly achieves this with variables and hover style?

hard

A. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: darken($btn-color, 15%);
}
}

B. $btn-color: #007BFF;
.button {
background-color: darken($btn-color, 15%);
&:hover {
background-color: $btn-color;
}
}

C. $btn-color: #007BFF;
.button {
background-color: lighten($btn-color, 15%);
&:hover {
background-color: darken($btn-color, 15%);
}
}

D. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: lighten($btn-color, 15%);
}
}

Solution

1. Step 1: Set base color variable

   The variable $btn-color is set to the base blue color #007BFF.

2. Step 2: Apply base color and darken on hover

   The button background uses $btn-color normally, and on hover uses darken($btn-color, 15%) to make it 15% darker.

3. Step 3: Verify hover effect logic

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   correctly darkens on hover.

   $btn-color: #007BFF;
   .button {
     background-color: darken($btn-color, 15%);
     &:hover {
       background-color: $btn-color;
     }
   }

   reverses colors.

   $btn-color: #007BFF;
   .button {
     background-color: lighten($btn-color, 15%);
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   lightens base color incorrectly.

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: lighten($btn-color, 15%);
     }
   }

   lightens on hover instead of darkening.

4. Final Answer:

   Code with base $btn-color and darken on hover -> Option A

5. Quick Check:

   Hover darken 15% =

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   [OK]

Hint: Hover darker means darken() inside &:hover [OK]

Common Mistakes:

• Swapping lighten and darken functions
• Applying darken on base instead of hover
• Forgetting to use & for hover selector