11

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?

nobetterdan
  • 189
  • 1
  • 1
  • 10
  • 2
    ..and don't forget the [`hsl()`](https://developer.mozilla.org/en/docs/Web/CSS/color_value#hsl()) and ['hsla()'](https://developer.mozilla.org/en/docs/Web/CSS/color_value#hsla()) :) – Gabriele Petrioli Dec 01 '16 at 10:42

4 Answers4

13

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>
Community
  • 1
  • 1
Alexis
  • 5,681
  • 1
  • 27
  • 44
  • Out of curiousity, what exactly would be the benefit of using RGBA over setting the opacity itself using something like (opacity:0.5;)? Is it that RGBA would be used to set just the colours opacity and keep the rest as normal? – nobetterdan Dec 01 '16 at 10:49
  • 6
    Usefull for overlay or when you want add a block with a transparancy. If you change the `opacity porperty` of the element all the content will be transparent. with rgba you can only add some transparancy on the background. – Alexis Dec 01 '16 at 10:51
  • An advantage of RGB over HEX is that it is a bit easier to manipulate the value, e.g. in Javascript, as you can just set a number instead of a product of two numbers/literals. – Marvin Dec 01 '16 at 10:55
5

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.

Markus G.
  • 1,620
  • 2
  • 25
  • 49
5

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.

mariuspearson
  • 229
  • 2
  • 1
0

To modify mariuspearson's reply, CMYK is the traditional color format for print and publishing. Although some RGB colors can print close to the original you see on your computer monitor, there are some unexpected and unwanted color variations (especially in blues and reds) if a CMYK graphic is used for TV / web or if the more brilliant RGB graphic is printed (where the ink cannot replicate the vibrancy). I would not recommend anyone use RGB for any print or publishing project.

Lucie
  • 1
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34621044) – Harrison Jul 04 '23 at 12:00