RGB and RGBA in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to pure red using RGB.

CSS

background-color: rgb([1], 0, 0);

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

A128

B100

C0

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 for red instead of 255.

Confusing the order of RGB values.

The red value in RGB ranges from 0 to 255. To get pure red, set red to 255 and green and blue to 0.

2fill in blank

medium

Complete the code to set a semi-transparent blue background using RGBA.

CSS

background-color: rgba(0, 0, [1], 0.5);

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

A128

B255

C0

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 for blue instead of 255.

Confusing the alpha value position.

In RGBA, the blue value is the third number. 255 means full blue. The last value 0.5 sets 50% transparency.

3fill in blank

hard

Fix the error in this RGBA color that should be semi-transparent green.

CSS

color: rgba(0, [1], 0, 0.3);

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

A255

B0

C128

D300

Attempts:

3 left

💡 Hint

Common Mistakes

Using values above 255 for color channels.

Mixing up the order of RGB values.

The green value must be between 0 and 255. 255 is full green. 300 is invalid and causes error.

4fill in blank

hard

Fill both blanks to create a background color with half-transparent yellow using RGBA.

CSS

background-color: rgba([1], [2], 0, 0.5);

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

A255

B128

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 for green or red instead of 255.

Confusing yellow with orange or green.

Yellow is made by mixing red and green at full intensity (255), blue is 0. Alpha 0.5 means 50% transparency.

5fill in blank

hard

Fill all three blanks to create a background color with 75% transparent purple using RGBA.

CSS

background-color: rgba([1], [2], [3], 0.25);

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

A128

B0

C255

D64

Attempts:

3 left

💡 Hint

Common Mistakes

Using green value other than 0 for purple.

Confusing alpha transparency values.

Purple is made by mixing red and blue. Here red is 64, green 0, blue 255. Alpha 0.25 means 75% transparent.