nobetterdan nobetterdan - 9 days ago 5
CSS Question

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

Answer

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

hex to decimal :

FF = 255

so #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;
}

.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 = 0.2/1 */
}
<div class="rgb"></div>
<div class="hexa"></div>
<div class="rgba"></div>