Color values and manipulation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output color of this Sass code?

Given the Sass code below, what is the resulting color value of $result?

SASS

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

A #6699cc

B #2a527f

C #99ccff

D #19334d

💡 Hint

The lighten function makes the color closer to white by the given percentage.

The lighten function increases the lightness of the base color by 20%, resulting in #99ccff.

🧠 Conceptual

intermediate

Which Sass function adjusts transparency?

Which Sass function below changes the transparency (alpha) of a color without altering its RGB values?

A opacity($color, 0.5)

B transparentize($color, 0.5)

C rgba($color, 0.5)

D alpha($color, 0.5)

💡 Hint

Look for the function that reduces opacity by a given amount.

The transparentize function reduces the opacity by the given amount, making the color more transparent.

❓ selector

advanced

Which Sass code produces a color 30% darker than #ffcc00?

Select the Sass code snippet that correctly creates a color 30% darker than #ffcc00.

A $dark-color: darken(#ffcc00, 30%);

B $dark-color: lighten(#ffcc00, 30%);

C $dark-color: adjust-color(#ffcc00, $lightness: -30%);

D $dark-color: saturate(#ffcc00, 30%);

💡 Hint

Darken reduces lightness, lighten increases it.

darken(#ffcc00, 30%) reduces the lightness by 30%, making the color darker.

❓ rendering

advanced

What color does this Sass code output?

What is the resulting color of $final-color after running this Sass code?

SASS

$color1: #123456;
$color2: #654321;
$final-color: mix($color1, $color2, 25%);

A #4a3f2a

B #3b3b3b

C #5a4b3c

D #2a3f4a

💡 Hint

The mix function blends colors weighted by the third parameter.

mix($color1, $color2, 25%) blends 25% of $color2 into $color1, resulting in #2a3f4a.

❓ accessibility

expert

Which Sass code ensures text color has enough contrast on a background?

Given a background color $bg, which Sass code correctly sets $text-color to black or white depending on contrast for accessibility?

SASS

$bg: #abcdef;
$text-color: ???

A $text-color: if(lightness($bg) > 50%, black, white);

B $text-color: if(darken($bg, 50%), black, white);

C $text-color: if(saturate($bg, 50%), black, white);

D $text-color: if(opacity($bg) > 0.5, black, white);

💡 Hint

Lightness helps decide if background is light or dark.

Using lightness($bg) > 50% checks if background is light, then sets text to black for contrast, else white.