What's difference between HEX and RGBA

1. If you have created or modified a style for a website, or if you are a digital artist then you might have seen HEX and/or RGB. Both HEX and RGB are used to determine color through code so that is why you can see it in software such as Adobe Creative Suite or through web design.

   In this article, I will not be very technical about this type of color, but I will provide brief information about each type of color along with useful links that you can use in your project.

   Difference between HEX and RGB

   
   

   What is the difference between HEX and RGB and when should we use one or the other type of color? Basically, the functions of the two types of colors are the same, meaning that they will display the same color. Visually, these two types of colors look different. The HEX color uses a mixture of six numbers and characters, while RGB colors use three sets of three numbers in the range 0 - 255.

   Let's look at this type of color in the example, and for our example, I will choose the main accent color from the Goedemorgen theme which is blue.

   Examples of HEX colors:

   # 0161bd

   Examples of RGB colors:

   RGB (1,97,189)

   As you can see, they look different but when you add each of these types to two different elements, the colors of these elements will be the same. Now, you might be wondering what is the reason for using RGB colors if the HEX color is much easier to use. Well, each type of color has different uses and the beauty of RGB colors that allows adding opacity to your color.

   Adding opacity to your colors can be useful if you want to add a lighter or darker background color to a particular section. For example, if you want to add overlays with a style similar to the Jumbotron section in the Goedemorgen theme then it can be easily done with RGB colors (Red, Green, Blue, and Alpha):

   rgba (0,0,0,0,5)

   As you might notice, we have added a fourth argument to our color that determines the opacity or alpha element. The opacity range is from 0.0 (fully transparent) to 1.0 (fully opaque). In our example, we have used 0.5;

   
   

   
   

   Useful Resources

   Below you can find several online tools that will help you to produce a HEX color palette and change some of these colors to RGBa if needed.

   
   

   RGB TO HEX by Prepostseo - this website has many color schemes that you can choose for your project. Each color scheme consists of five colors that play well with each other. You can go to the next color scheme by clicking the space bar on your keyboard. It is possible to lock the color you like and produce the next color set based on the color you choose.

   
   

   RGB TO HEX CONVERTER - this is a simple RGB to HEX converter that also gives you the option to add opacity to your color. Just enter your RGB color into the text field and then press the button to change the color to HEX.