Color values and manipulation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to a light gray using a hex value.

SASS

body {
  background-color: [1];
}

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

A#ccc

Brgb(255, 255, 255)

Cblue

Dtransparent

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names like 'blue' instead of hex code.

Using rgb() syntax incorrectly.

The hex code #ccc is a shorthand for light gray color.

2fill in blank

medium

Complete the code to darken the color #6699cc by 20%.

SASS

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

.box {
  background-color: $dark-color;
}

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

A10%

B20%

C30%

D40%

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number without % sign.

Using too small or too large percentage.

The darken() function reduces lightness by the given percentage. Here, 20% darkens the color noticeably.

3fill in blank

hard

Fix the error in the code to make the color semi-transparent with 50% opacity.

SASS

$base-color: #ff0000;
$transparent-color: rgba($base-color, [1]);

.button {
  background-color: $transparent-color;
}

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

A5

B50%

C0.5

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 50% instead of 0.5.

Using integer 5 which is invalid.

The rgba() function expects the alpha value as a decimal between 0 and 1, so 0.5 means 50% opacity.

4fill in blank

hard

Fill both blanks to create a color that is 30% lighter and has 70% opacity.

SASS

$color: #336699;
$light-color: [1]($color, 30%);
$final-color: rgba($light-color, [2]);

.card {
  background-color: $final-color;
}

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

Alighten

Bdarken

C0.7

D0.3

Attempts:

3 left

💡 Hint

Common Mistakes

Using darken() instead of lighten().

Using opacity 0.3 instead of 0.7.

Use lighten() to make the color lighter by 30%. Then use rgba() with alpha 0.7 for 70% opacity.

5fill in blank

hard

Fill all three blanks to create a map of colors where keys are uppercase color names and values are colors darkened by 15%.

SASS

$colors: ("red": #ff0000, "green": #00ff00, "blue": #0000ff);
$dark-colors: ([1]: darken([2], 15%) for [3] in $colors);

.container {
  background-color: map-get($dark-colors, "RED");
}

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

Ato-upper-case

Bvalue

Ckey

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names like 'to-upper-case' as variable.

Mixing up key and value.

Use map to iterate over the map. key is the color name, value is the color value. to-upper-case converts keys to uppercase.

Practice

1. Which Sass function would you use to make a color lighter?

easy

A. rgba()

B. darken()

C. lighten()

D. mix()

Solution

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

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

2. Step 2: Compare with other functions

   darken() makes colors darker, rgba() changes transparency, and mix() blends two colors.

3. Final Answer:

   lighten() -> Option C

4. Quick Check:

   Make color lighter = lighten() [OK]

Hint: Lighten means increase brightness, so use lighten() [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Using rgba() to change brightness
• Mixing colors instead of lightening

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

easy

A. darken(#ff0000, '20%')

B. darken(#ff0000 20%)

C. darken(#ff0000; 20%)

D. darken(#ff0000, 20%)

Solution

1. Step 1: Check function syntax

   The darken() function takes two arguments separated by a comma: a color and a percentage without quotes.

2. Step 2: Validate each option

   darken(#ff0000, 20%) uses a comma and percentage without quotes, which is correct. Options B and C miss the comma or use wrong separators. darken(#ff0000, '20%') uses quotes around percentage, which is invalid.

3. Final Answer:

   darken(#ff0000, 20%) -> Option D

4. Quick Check:

   Correct syntax uses comma and percentage without quotes [OK]

Hint: Use comma between color and percentage, no quotes on percent [OK]

Common Mistakes:

• Omitting comma between arguments
• Putting percentage in quotes
• Using semicolon instead of comma

3. What color will this Sass code produce?

$base: #0000ff;
$mix-color: #ff0000;
$result: mix($base, $mix-color, 50%);

medium

A. #ff0000 (red)

B. #800080 (purple)

C. #0000ff (blue)

D. #808000 (olive)

Solution

1. Step 1: Understand mix() function

   The mix() function blends two colors by a given weight. 50% means equal parts of both colors.

2. Step 2: Mix blue and red equally

   Mixing pure blue (#0000ff) and pure red (#ff0000) equally results in purple (#800080).

3. Final Answer:

   #800080 (purple) -> Option B

4. Quick Check:

   Mix blue + red equally = purple [OK]

Hint: Mix equal red and blue = purple [OK]

Common Mistakes:

• Thinking mix returns original color
• Confusing olive with purple
• Ignoring the 50% weight in mix()

4. Identify the error in this Sass code:

$color: lighten(#123456 10%);

medium

A. Missing comma between color and percentage

B. Percentage should be negative

C. Color hex code is invalid

D. lighten() cannot take percentages

Solution

1. Step 1: Check lighten() function syntax

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

2. Step 2: Identify missing comma

   The code uses a space instead of a comma between #123456 and 10%, causing a syntax error.

3. Final Answer:

   Missing comma between color and percentage -> Option A

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Check commas between function arguments [OK]

Common Mistakes:

• Using space instead of comma between arguments
• Thinking percentage must be negative
• Believing lighten() can't take percentages

5. You want to create a button background color that is 30% lighter than a base color $primary: #0066cc; and add 50% transparency. Which Sass code correctly does this?

hard

A. $button-bg: rgba(lighten($primary, 30%), 0.5);

B. $button-bg: lighten(rgba($primary, 0.5), 30);

C. $button-bg: lighten($primary, 30%, 0.5);

D. $button-bg: rgba($primary, lighten(30%, 0.5));

Solution

1. Step 1: Lighten the base color first

   Use lighten($primary, 30%) to increase brightness by 30%.

2. Step 2: Add transparency with rgba()

   Wrap the lightened color in rgba(..., 0.5) to set 50% opacity.

3. Step 3: Check other options

   $button-bg: lighten(rgba($primary, 0.5), 30); uses amount without % unit, which is invalid. $button-bg: lighten($primary, 30%, 0.5); uses wrong argument count. $button-bg: rgba($primary, lighten(30%, 0.5)); misuses rgba() arguments.

4. Final Answer:

   $button-bg: rgba(lighten($primary, 30%), 0.5); -> Option A

5. Quick Check:

   Lighten first, then add transparency [OK]

Hint: Lighten color first, then wrap with rgba() for transparency [OK]

Common Mistakes:

• Adding transparency before lightening
• Passing wrong number of arguments
• Misordering function calls