Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS Build a Simple iPhone App with Swift Improving Our User Interface Adding a Pop of Color

Posted by Eddie Aguilar
Eddie Aguilar
2,393 Points

Can someone describe to me what exactly the alpha component means??

The red, green, and blue I understand but the alpha value I do not understand. can someone please explain?

2 Answers

tromben98
tromben98
13,273 Points
tromben98
tromben98
13,273 Points

Hi Eddie!

RGBA stands for red green blue alpha. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) that describes the color transparency.

Best regards, Jonas

April Copes
April Copes
9,015 Points
April Copes
April Copes
9,015 Points

Hey Eddie,

I understand the alpha component to represent how well you can see through a color...the opacity value. So at 0% it would be invisible to see and at 100% it would be the full color of which you have chosen and any decimal value in between such as .7 ,70% or .45, 45% for example will be the same color the set default color at 100% but lighter or more translucent. The lower the percentage or decimal value the easier the ability to see through the color will be. Similar to how some windows are in churches. You can see through the glass even if there is color to it. The lower the number or closer to 0 the easier it is to see through. Respectively the higher the number or closer to 100% the harder it will be to see through the color and at 100% depending on the color you won't be able to see through that color at all. It will be solid, conceptually.

Example: { background-color: rgba(255, 255, 255, .3) }; This color would be white without the alpha value(opacity value) but now it will be a very light white color and very easy to see through.

Below Posted From Wikipedia

The alpha channel is normally used as an opacity channel. If a pixel has a value of 0% in its alpha channel, it is fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel (traditional digital images). Values between 0% and 100% make it possible for pixels to show through a background like a glass, an effect not possible with simple binary (transparent or opaque) transparency. It allows easy image compositing.