Make your site colorful, or what color to use: HEX vs. RGB

If you have ever created or modified styles for a website, or if you are a digital artist then you’ve probably seen HEX and/or RGB. Both HEX and RGB are used to define colors through the code so that is why you can see it a lot in a software such as Adobe Creative Suite or through a web design.

In this article I am not going to be super technical about these color types but I’ll provide a brief information about each color type 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 we should use one or the other color type? Basically, the functionality of both color types is the same, meaning they both will display the same color. Visually, these two color types look different. The HEX color uses a mix of six numbers and characters, while the RGB color uses three sets of three numbers with a range of 0 – 255.

Let’s see these color type in an example, and for our example I’ll choose the main accent color of the Goedemorgen theme which is a blue color.

Example of HEX color:

#0161bd

Example of RGB color:

rgb(1,97,189)

As you can see, they both look different but when you add each of these types to two different elements then the color of these elements will be identical. Now, you’re probably wondering what is the reason of using the RGB color if the HEX color is much more easier to use. Well, each color type has different uses, and the beauty of the RGB color that it allows to add an opacity to your color.

Adding the opacity to your color can be handy if you want to add a lighter or more darker background color to the specific section. For example, if you want to add an overlay with a similar style to the Jumbotron section in the Goedemorgen theme then it can be easily done with the RGBa (Red, Green, Blue and Alpha) color:

rgba(0,0,0,0.5)

As you’ve might noticed, we’ve added the fourth argument to our color which defines the opacity or alpha of an element. The range the opacity is from 0.0 (fully transparent) to 1.0 (fully opaque). In our example, we’ve used 0.5;

Useful Resources

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

Color schemes generator by Coloors – this website has a lot of predefined color schemes that you can choose for your project. Each color scheme is consisted of five colors that play nice with each other. You can go to the next color scheme by clicking on the space bar on your keyboard. It is possible to lock a color that you like and generate the next set of colors based on your selected colors.

HEX 2 RGBA Converter – this is a simple HEX to RGB converter which also gives you the option to add an opacity value to your color. Simply enter your HEX color into the text field and then press the button to convert the color to RGB.