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.