![\"RGBA](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/04\/art1.jpg\")
<\/figure>\n\n\n\nAnd if we wanted to create black, basic color theory states that the absence of any color is black. Therefore, we\u2019ll go with 0% of red, green, and blue. So RGB is sort of like mixing watercolors to arrive at a desired shade.<\/p>\n\n\n\n
Why would you use RGBA?<\/h3>\n\n\n\n
In CSS3, RGBA is comparable to Layers in Photoshop. RGBA allows you to achieve not just the flat blue or fuchsia or black colors talked about earlier, but also a level of transparency. Think of that transparency as an additional element to use in your design. To be clear, though, CSS already has had an opacity property. You can easily specify the opacity of the entire element and everything contained within it.<\/p>\n\n\n\n
However, RGBA allows you to go beyond that\u2014you can control the opacity of individual colors, rather than the entire element. You have the flexibility to adjust the transparency or opacity of just the background or just the foreground or both, depending on your requirements.<\/p>\n\n\n\n Fortunately, it\u2019s pretty simple to make use of RGBA. First, let\u2019s talk about the syntax. Generally, an RGBA notation looks pretty much like this:<\/p>\n\n\n\n Just like RGB, the first three values (red, green, and blue) can either be integers between 0 or 255 or percentages ranging from 0% to 100%. Also just like RGB, these values specify the amount of red, green, and blue in the desired shade. Therefore, the syntax for a pure red should look like:<\/p>\n\n\n\n or<\/p>\n\n\n\n The fourth value denotes alpha and needs to be between 0.0 (absolute transparency) and 1.0 (absolute opacity). For example, 0.5 would be 50% opacity and 50% transparency.<\/p>\n\n\n\n Virtually every modern web browser nowadays supports RGBA color model, so there\u2019s not much for you to fear in the way of compatibility. However, we recommend specifying solid RGB colors as a fallback for RGBA. You\u2019ll be on the safe side, but there\u2019s also not much effort involved for the extra step.<\/p>\n\n\n\n To specify a solid fallback color, I rely on hexadecimal color notations. Take white, for example:<\/p>\n\n\n\n The above hex code will render a pure opaque white. Now, here\u2019s how I would add 50% opacity to this in RGBA:<\/p>\n\n\n\n All done! Again the fallback in hexadecimal is something of a personal practice for me. RGBA has been around since 2011, so basically any web browser released after IE9 can support it. And if hexadecimal isn\u2019t your thing, you can still fall back to RGB from RGBA, using RGB notation itself. In that case, you can specify RGB colors for older browsers and RGBA colors for browsers capable of interpreting them. For example:<\/p>\n\n\n\n Of course, if you\u2019re working with a background and transparency is something that you really must have, you also have the option of falling back on a PNG using an alpha channel. I don\u2019t recommend using this method unless you absolutely have to. A PNG background is significantly less flexible than CSS, and you might end up using a separate PNG image for each level of transparency that you require.<\/p>\n\n\n\n However, the logic here is simple too: Specify a background using PNG that every browser can comprehend and then overwrite it using the RGBA notation. Here is how:<\/p>\n\n\n\n As you can see, the RGBA color model allows you to create graphically rich designs with ease, thanks to its flexibility with precision opacity and transparency. Hopefully, this article will help you use RGBA colors in your projects and designs.<\/p>\n\n\n\n If you’re looking to make hosting your WordPress sites<\/a> as easy as your RGBA notations, check our WP Engine’s plans<\/a> to find the one that suits your needs!<\/p>\n","protected":false},"excerpt":{"rendered":" When it comes to specifying colors in CSS, the RGB color model has enjoyed immense popularity for many years now. The designer uses a combination of red, green, and blue to achieve the required tone. It\u2019s a rather simple color model that works well. However, the RGB color model offers tones that are flat and…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":140176,"template":"","resource-topic":[1396],"resource-role":[1397],"resource-type":[916],"class_list":["post-8570","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n![\"RGBA](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/04\/art2.jpg\")
<\/figure>\n\n\n\nHow do you use RGBA?<\/h3>\n\n\n\n
[code]\nrgba (red, green, blue, alpha)\n[\/code]<\/pre>\n\n\n\n
[code]\nrgba (255, 0, 0, 1);\n[\/code]<\/pre>\n\n\n\n
[code]\nrgba (100%, 0%, 0%, 1);\n[\/code]<\/pre>\n\n\n\n
Is RGBA browser compatible?<\/h3>\n\n\n\n
![\"RGBA](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/04\/art3.jpg\")
<\/figure>\n\n\n\n[code]\ncolor: #ffffff;\n[\/code]<\/pre>\n\n\n\n
[code]\ncolor: rgba(255, 255, 255, 0.5);\n[\/code]<\/pre>\n\n\n\n
[code]\ncolor: rgb (0, 0, 0);\ncolor: rgba (0, 0, 0, 0.5);\n[\/code]<\/pre>\n\n\n\n
[code]\nbackground: transparent url (something.png);\nbackground: rgba (0, 0, 0, 0.5) none;\n[\/code]<\/pre>\n\n\n\n