Coding for Beginners: CSS Basics #55— RGBA vs. the RGB color system
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
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