RGB and RGBA in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding RGBA Transparency

What will be the visible effect of applying background-color: rgba(255, 0, 0, 0.3); to a div placed over a white background?

A The div will appear as a solid red color with no transparency.

B The div will appear completely transparent, showing only the white background.

C The div will appear as a semi-transparent red, allowing the white background to show through faintly.

D The div will appear as a solid white color, ignoring the red values.

💡 Hint

Remember that the alpha value in RGBA controls transparency from 0 (fully transparent) to 1 (fully opaque).

The alpha value 0.3 means the red color is 30% opaque and 70% transparent, so the white background partially shows through, making the red appear lighter and see-through.

📝 Syntax

intermediate

Correct RGBA Syntax

Which of the following CSS color declarations is syntactically correct for an RGBA color?

A background-color: rgba(255,255,255,255);

B background-color: rgba(255, 255, 255, 1);

C background-color: rgba(255 255 255 / 1);

D background-color: rgba(255, 255, 255);

💡 Hint

RGBA requires four values: red, green, blue, and alpha, with commas separating the first three and the alpha last.

Option B uses the correct syntax with commas separating red, green, blue, and alpha values. Option B uses 255 for alpha which is invalid (alpha must be between 0 and 1). Option B uses a newer CSS syntax but is not standard rgba() syntax. Option B is missing the alpha value.

❓ rendering

advanced

Visual Result of Overlapping RGBA Layers

Given two overlapping div elements, one with background-color: rgba(0, 0, 255, 0.5); and the other behind it with background-color: rgb(255, 255, 0);, what color will the overlapping area appear as?

A A solid blue color with no yellow visible.

B A solid yellow color with no blue visible.

C A gray color because blue and yellow cancel each other out.

D A blend of blue and yellow producing a greenish color due to transparency.

💡 Hint

Think about how semi-transparent blue over solid yellow mixes colors visually.

The semi-transparent blue (50% opacity) overlays the solid yellow, mixing the colors visually. Blue and yellow combine to create a greenish tint in the overlapping area.

❓ selector

advanced

Selecting Elements by RGBA Background Color

Which CSS selector will correctly select all elements with a background color exactly set to rgba(0, 128, 0, 0.7)?

A [style='background-color: rgba(0, 128, 0, 0.7)']

B [style^='background-color: rgba(0, 128, 0, 0.7)']

C [style$='background-color: rgba(0, 128, 0, 0.7)']

D [style*='background-color: rgba(0, 128, 0, 0.7)']

💡 Hint

Attribute selectors with = match exact attribute values.

Option A uses the exact match selector which selects elements whose style attribute exactly equals the given string. Other options select partial matches which may select unintended elements.

❓ accessibility

expert

Ensuring Text Readability on RGBA Backgrounds

You have a div with background-color: rgba(0, 0, 0, 0.4); overlaying an image. Which approach best improves text readability inside this div for users with visual impairments?

A Use white text with a strong text-shadow to increase contrast against the semi-transparent background.

B Use the same color as the background for the text to create a subtle effect.

C Use black text without any shadow because the background is already dark.

D Remove the background color to avoid any transparency issues.

💡 Hint

Contrast and clarity are key for accessibility.

White text with a strong text-shadow stands out clearly against a semi-transparent dark background, improving readability for users with low vision. Black text would blend in, same color text is invisible, and removing background loses visual layering.

Practice

1. What does the rgba(255, 0, 0, 0.5) color value represent in CSS?

easy

A. A solid black color

B. A fully opaque green color

C. A fully transparent blue color

D. A semi-transparent red color

Solution

1. Step 1: Understand RGBA components

   The first three numbers (255, 0, 0) represent red, green, and blue. Here, red is full (255), green and blue are zero.

2. Step 2: Interpret the alpha value

   The last number 0.5 means 50% transparency, so the color is semi-transparent.

3. Final Answer:

   A semi-transparent red color -> Option D

4. Quick Check:

   RGBA = red + transparency = semi-transparent red [OK]

Hint: RGBA adds transparency as the last number [OK]

Common Mistakes:

• Confusing RGB with RGBA
• Ignoring the alpha transparency value
• Mixing up color order (RGB)
• Thinking 0.5 means fully opaque

2. Which of the following is the correct syntax for a fully opaque blue color using RGB in CSS?

easy

A. rgb(255, 0, 0, 1)

B. rgb(0, 0, 255)

C. rgba(0, 0, 255)

D. rgba(255, 255, 0)

Solution

1. Step 1: Recall RGB syntax

   RGB uses three numbers for red, green, and blue. The format is rgb(red, green, blue).

2. Step 2: Check the options

   rgb(0, 0, 255) uses rgb with three values and sets blue to 255, which is correct for blue color.

3. Final Answer:

   rgb(0, 0, 255) -> Option B

4. Quick Check:

   RGB needs 3 values, no alpha [OK]

Hint: RGB uses exactly 3 numbers, no alpha [OK]

Common Mistakes:

• Using rgba without alpha value
• Adding extra values in rgb
• Mixing order of colors
• Using rgba with missing parameters

3. What color and transparency will the following CSS produce?

background-color: rgba(0, 128, 0, 0.3);

medium

A. A semi-transparent green color

B. A solid green color

C. A semi-transparent red color

D. A fully transparent color

Solution

1. Step 1: Identify RGB values

   The values (0, 128, 0) mean no red, medium green, no blue, so the color is green.

2. Step 2: Interpret alpha transparency

   The alpha value 0.3 means 30% opacity, so the color is mostly transparent but visible.

3. Final Answer:

   A semi-transparent green color -> Option A

4. Quick Check:

   RGBA = green + 30% opacity = semi-transparent green [OK]

Hint: Alpha less than 1 means some transparency [OK]

Common Mistakes:

• Assuming alpha 0.3 means fully opaque
• Mixing up RGB color order
• Confusing green with red or blue
• Ignoring alpha value

4. Find the error in this CSS color declaration:

color: rgba(255, 255, 255, 2);

medium

A. RGB values must be between 0 and 100

B. Missing semicolon after rgba

C. Alpha value cannot be greater than 1

D. RGBA requires 5 parameters

Solution

1. Step 1: Check alpha value range

   Alpha in rgba must be between 0 (transparent) and 1 (opaque). Here it is 2, which is invalid.

2. Step 2: Verify other parts

   RGB values 255 are valid, semicolon is present, and rgba takes 4 parameters, so no other errors.

3. Final Answer:

   Alpha value cannot be greater than 1 -> Option C

4. Quick Check:

   Alpha must be 0 to 1 [OK]

Hint: Alpha must be between 0 and 1 inclusive [OK]

Common Mistakes:

• Using alpha > 1
• Confusing RGB max values
• Forgetting semicolon (not error here)
• Adding extra parameters

5. You want a background color that is red with 40% opacity over a white page. Which CSS rule correctly achieves this effect?

hard

A. background-color: rgba(255, 0, 0, 0.4);

B. background-color: rgb(255, 0, 0, 0.4);

C. background-color: rgba(255, 255, 255, 0.4);

D. background-color: rgb(255, 0, 0); opacity: 0.4;

Solution

1. Step 1: Choose correct function for transparency

   Only rgba() supports alpha transparency as the fourth parameter. rgb() does not.

2. Step 2: Verify color and transparency

   background-color: rgba(255, 0, 0, 0.4); uses red (255, 0, 0) with alpha 0.4, which means 40% opacity (60% transparent), exactly what is needed.

3. Step 3: Check other options

   background-color: rgb(255, 0, 0, 0.4); uses rgb with 4 parameters (invalid). background-color: rgba(255, 255, 255, 0.4); uses white color, not red. background-color: rgb(255, 0, 0); opacity: 0.4; sets opacity on the whole element, which affects all content, not just background.

4. Final Answer:

   background-color: rgba(255, 0, 0, 0.4); -> Option A

5. Quick Check:

   RGBA with alpha = 0.4 for semi-transparent red [OK]

Hint: Use rgba() for color + transparency in one step [OK]

Common Mistakes:

• Using rgb() with alpha value
• Setting opacity on element instead of color
• Choosing wrong color values
• Confusing rgba parameters order