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.