Lighten and darken functions in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does the lighten() function affect a color in Sass?

In Sass, what does the lighten() function do to a given color?

A It decreases the lightness of the color by a specified percentage, making it closer to black.

B It increases the lightness of the color by a specified percentage, making it closer to white.

C It increases the saturation of the color by a specified percentage, making it more vivid.

D It decreases the saturation of the color by a specified percentage, making it more gray.

💡 Hint

Think about what happens when you add white to a color.

The lighten() function increases the lightness value of a color in HSL color space, making the color appear lighter or closer to white.

📝 Syntax

intermediate

What is the output color of this Sass code?

Given the Sass code:

$color: #336699;
$result: lighten($color, 20%);

What is the hex value of $result?

A #6699cc

B #4d80b3

C #003366

D #1a334d

💡 Hint

Lighten increases lightness by 20%, so the color becomes lighter than #336699.

Lightening #336699 by 20% results in #6699cc, a lighter blue shade.

❓ rendering

advanced

What color will be rendered by this Sass snippet?

Consider this Sass code:

$base: #cc3300;
$dark: darken($base, 30%);

Which color will $dark represent when rendered in the browser?

A #330000

B #ff6600

C #993300

D #661a00

💡 Hint

Darken reduces lightness, making the color closer to black.

Darkening #cc3300 by 30% results in #661a00, a much darker reddish-brown color.

❓ selector

advanced

Which Sass selector uses lighten() correctly to style a button hover?

You want to make a button's background color lighter on hover using Sass. Which selector and property usage is correct?

A button:hover { background-color: lighten(#0055aa, '15%'); }

B button:hover { background-color: lighten(#0055aa 15%); }

C button:hover { background-color: lighten(#0055aa, 15%); }

D button:hover { background-color: lighten(#0055aa); }

💡 Hint

Check the syntax for function arguments in Sass.

The lighten() function requires two arguments separated by a comma: the color and a percentage without quotes.

❓ accessibility

expert

Why should you be cautious when using lighten() or darken() for accessibility?

When adjusting colors with lighten() or darken() in Sass, what accessibility issue might arise?

A The contrast ratio between text and background might become too low, making text hard to read.

B The colors might become too saturated, causing eye strain.

C The colors might not display correctly on all browsers due to Sass limitations.

D The lighten() and darken() functions can only be used on grayscale colors.

💡 Hint

Think about how color contrast affects readability.

Lightening or darkening colors can reduce contrast between text and background, which can make content difficult to read for users with visual impairments.

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