0

I found another question on SO about rgb vs rgba that is very similar, but it's missing an answer about the usage of rgb with opacity.

I know the difference between both – rgba is just rgb but with alpha for opacity. The thing is, it has been months or even years that I am using rgb with opacity values. It has always worked for me. rgb(255, 0, 255, 0.5)

Makes me wonder if there's an advantage to use one if both works the same? rgb has been there longer so browser compatibility I suppose is better? Also I was told by a coworker that rgba value will only work for background colors, but then again, I did some tests in codepen and it works on Edge and Chrome.

(I know both are Chrome based both these are the one I have downloaded)

Related question : What are differences between RGB vs RGBA other than 'opacity'

Here is my snippet

/* texts */
.one {
  color: rgba(255, 200, 0, .5);
}
.oneFive {
  color: rgb(255, 200, 0, .5);
}

/* backgrounds */
.two {
  background-color: rgb(255, 0, 255, 0.5);
}
.three {
  background-color: rgba(0, 0, 255, 0.5);
}



/*          */
/* settings */
/*          */
.two, .three {
  height: 50px;
}
.two {
  margin-top: 30px;
}
.two, .three, .zero {
  color: white;
}
.one, .oneFive {
  height: 50px;
  font-weight: bold;
  font-size: 2em;
  padding-left: 40px;
  padding-top: 20px;
}
body { 
  background-color: #444; 
  color: white; 
}
.zero {
  background-color: darkgreen;
  width: 300px;
  height: 350px;
  position: absolute;
  top: 35px;
  z-index: -1;
}
dark grey 100% opacity

<div class="zero">dark green 100% opacity</div>

<div class="oneFive">rgb yellow text 70% opacity</div>
<div class="one">rgba yellow text 70% opacity</div>

<div class="two">rgb 50% background opacity</div>
<div class="three">rgba 50% background opacity</div>
pensum
  • 980
  • 1
  • 11
  • 25
  • 2
    I'm going to go out on a limb and say it's the browser translating what is essentially an incorrect value set in `rgb` with an opacity value. If you look in the browser dev tools under the computed tab, you'll notice that the `rgb` values are computed to `rgba`. I'm thinking that any browser that supports CSS3 will "fix" the property. _Also I was told by a coworker that rgba value will only work for background colors_ Your coworker is wrong. – disinfor Feb 03 '21 at 03:38
  • 1
    _rgb has been there longer so browser compatibility I suppose is better?_ I wouldn't say that. You'll never notice a performance hit, but you'll make your browser do less work if it doesn't have to "fix" your incorrect values being passed to the `rgb` set. – disinfor Feb 03 '21 at 03:39
  • 2
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors – disinfor Feb 03 '21 at 03:44
  • @disinfor Thanks for answering so quickly. I have indeed checked the console for the rgb value. It seems like Chrome does not need to fix it. (https://www.screencast.com/t/8essnzkacA). I see that rgba is an alias for rgb since CSS Level 4. I guess most popular browsers do. If you can bundle your replies as an answer, I would accept it as it gives me the information I needed. Thanks! – pensum Feb 03 '21 at 04:24
  • 1
    I think that the RGBA is used for saving adding another CSS property of opacity. If we want to add any element a color with opacity or background with opacity, rgba will be the best choice because we wouldn't write opacity property. So saving one line of code. – Raashid Din Dar Feb 03 '21 at 04:35

2 Answers2

1

Makes me wonder if there's an advantage to use one if both works the same?

It's not about advantage but this is something new defined in the Specification

rgb() and rgba(), and hsl() and hsla() are now aliases of each other (all of them have an optional alpha). ref

And

Also for legacy reasons, an rgba() function also exists, with an identical grammar and behavior to rgb(). ref

So rgba() is meant to disappear and only rgb() should be used but this won't happen because it will create a lot of issues and conflit so rgba() will still be considered and will simply have the same syntax as rgb()

Also note that the new syntax no more contain comma:

rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) |
  rgb( <number>{3} [ / <alpha-value> ]? )
<alpha-value> = <number> | <percentage>

You should write rgb(255 65 40) or rgb(255 65 40 / 80%) for example but still for legacy reasons the comma syntax is still supported:

For legacy reasons, rgb() also supports an alternate syntax that separates all of its arguments with commas:

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

Answer as requested:

I'm going to go out on a limb and say it's the browser translating what is essentially an "incorrect" value set in rgb with an opacity value.

If you look in the browser dev tools under the computed tab, you'll notice that the rgb values are computed to rgba (at least in Firefox).

I'm thinking that any browser that supports CSS3 will "fix" the property.

Also I was told by a coworker that rgba value will only work for background colors: Your coworker is wrong.

rgb has been there longer so browser compatibility I suppose is better? I wouldn't say that. You'll never notice a performance hit, but you'll make your browser do less work if it doesn't have to "fix" your incorrect values being passed to the rgb set. Update: rgba is an alias for rgb, so it's really not fixing anything, it's simply passing to rgb anyway.

Here is some documentation on rgb and rgba - specifically the aliasing of the functions:

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors

disinfor
  • 10,865
  • 2
  • 33
  • 44