𝔦𝔱'𝔰-𝔞 𝔪𝔢 🌠 (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
lina_trinch) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
killthecake2020-03-22 02:20 pm
lina_trinch) wrote in killthecake2020-03-22 02:20 pm
Entry tags:
[2] Tutorial: RGBA Color Codes
So we all know what COLORS are and most of us know what hex codes are. As a refresher, they're those color codes that look like #f70202 or #2f00ff.
But RGBA codes are something that are still relatively new to me. I explained how they worked in a post for an old code of mine but I'm going to repeat that here.
How RGBA Works
RGBA stands for Red Green Blue Alpha. When you use a color picker to find a hex code, you'll almost always see a side part for RGB values or separate parts for Red, Green, and Blue values.
The Alpha part is what makes it transparent when you use a number between 0 and 1 (y'know like 0.3, 0.8, etc).
The code is literally rgba(RED,GREEN,BLUE,ALPHA). So, if you used rgba(0,0,0,0.5) as a color, you'll get a black background that's about half transparent.
Why RGBA Is Useful
Well, the obvious reason is transparency, which we can't get with any other color codes.
It's also great if you want a pale color. Below is an example. The one on top is a hex code. The one on the bottom is an rgba code with an alpha value of 0.5. Both are the exact same color (as far as coding goes).
It's also great if you're working with gradients and you want to blend your colors a little better. Below is another example. (And we'll cover gradients in another tutorial.)
And that's all I got! If you have questions, feel free to ask.
But RGBA codes are something that are still relatively new to me. I explained how they worked in a post for an old code of mine but I'm going to repeat that here.
RGBA stands for Red Green Blue Alpha. When you use a color picker to find a hex code, you'll almost always see a side part for RGB values or separate parts for Red, Green, and Blue values.
The Alpha part is what makes it transparent when you use a number between 0 and 1 (y'know like 0.3, 0.8, etc).
The code is literally rgba(RED,GREEN,BLUE,ALPHA). So, if you used rgba(0,0,0,0.5) as a color, you'll get a black background that's about half transparent.
Well, the obvious reason is transparency, which we can't get with any other color codes.
It's also great if you want a pale color. Below is an example. The one on top is a hex code. The one on the bottom is an rgba code with an alpha value of 0.5. Both are the exact same color (as far as coding goes).
It's also great if you're working with gradients and you want to blend your colors a little better. Below is another example. (And we'll cover gradients in another tutorial.)
And that's all I got! If you have questions, feel free to ask.