Difference Between Hex Colour, Rgb, & Rgba And When Should Each They Be Used?

While looking at tutorials for a multitude of topics, I've often seen RGB & RGBA be used instead of hex codes for colours in HTML/CSS. Can someone explain to me exactly what i

Solution 1:

There's no differences between a RGB and hex color.

hex to decimal :

FF = 255

=> #FFFFFF = rgb(255,255,255)

When you break down the hexa color :

#FF  FF    FF
red green blue

But with rgba (alpha) you can add a alpha variable it add an opacity to your color.

You can use RGB and HEX it depends of your preferences

Examples :

div {
 width:100px;
 height:100px;
 border:solid 1px black;
 display:inline-block;
}

.rgb{
  background-color:rgb(124,220,50); /* to hexa = 7C, DC, 32 */
}

.hexa{
  background-color:#7CDC32;
}

.rgba{
  background-color:rgba(124,220,50,0.2); /* opacity = 20% */
}

<divclass="rgb">rgb</div><divclass="hexa">hexa</div><divclass="rgba">rgba</div>

Solution 2:

The Difference between RGB and RGBA is simple to say, "there is no difference" EXCEPT the "A" -> Alpha

RGB (Red Green Blue) RGBA (Red Green Blue Alpha)

You use the alpha parameter when you want the color to get transparent. (Values between 0.0 - 1.0)

And the main difference between RGB / RGBA and HEX is that HEX uses a mix of 6 characters and numbers. (Hexadecimal) And RGB uses 3 sets of 3 numbers, which have a range of 0-255.

There's no more difference and it's up to you what you want to use.

Solution 3:

RGB (Red, Green, Blue) values are more archaically but universally used across different industries including printing and publishing. In the past it was more widely used in websites than it is today.

RGBA (Red, Green, Blue, Alpha) is used for making a colour transparent. The value for A (alpha) is from 0, completely transparent, to 1 completely opaque.

hex, is a more recent quick easy value used exclusively for websites and applications.