nobetterdan nobetterdan - 6 months ago 36
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?


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 {
 border:solid 1px black;

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


  background-color:rgba(124,220,50,0.2); /*opacity = 0.2/1 */
<div class="rgb"></div>
<div class="hexa"></div>
<div class="rgba"></div>