Coding for Beginners: CSS Basics #55— RGBA vs. the RGB color system

------

Last week, we went over the RGB color system. RGB represents the colors red, green, and blue. It is an additive color model. The values of red, green, and blue are expressed as numbers between 0 and 255.

This week we will go over the RGBA color system. The "A" in RGBA stands for the alpha channel. The alpha channel indicates the opacity. So the value of 1 for the alpha channel represents full opacity or 100% while the value of 0 represents full transparency or 0%.

We will look at how the alpha channel affects how three of our colors, red, green, and blue, will display.

color: rgb(255, 0, 0); is red
color: rgb(0, 128, 0); is green
color: rgb(0, 0, 255); is blue

This is our CSS:

background-color: rgba(255, 0, 0, 1);
background-color: rgba(0, 128, 0, 1);
background-color: rgba(0, 0, 255, 1);
background-color: rgba(255, 0, 0, 0.8);
background-color: rgba(0, 128, 0, 0.8);
background-color: rgba(0, 0, 255, 0.8);
background-color: rgba(255, 0, 0, 0.6);
background-color: rgba(0, 128, 0, 0.6);
background-color: rgba(0, 0, 255, 0.6);
background-color: rgba(255, 0, 0, 0.4);
background-color: rgba(0, 128, 0, 0.4);
background-color: rgba(0, 0, 255, 0.4);
background-color: rgba(255, 0, 0, 0.2);
background-color: rgba(0, 128, 0, 0.2);
background-color: rgba(0, 0, 255, 0.2);

Here we are taking each of our colors, red, green, and blue, and adding an alpha component where we are displaying how the alpha channel at 1, 0.8, 0.6, 0.4, and 0.2 affect the display of our color.

#HTML #CSS #coding #web #accessibility #rgbcolor #rbgacolor #rgbcolorsystem #opacity #alphachannel #rgbavsrgb #webdesigncourse #webdevelopmenttutorial #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse