html - Difference between hex colour, RGB, & RGBA and when should each they be used?

Question

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 is the difference between RGB, RGBA, hex, and when should each be used/the benefit of using one over the other?

Answer 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% */
}

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