title: What is the difference between rgb() and rgba() opacity?
body: <p>I found another question on SO about rgb vs rgba that is very similar, but it's missing an answer about the usage of <strong>rgb with opacity</strong>.</p>
  <p>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. <code>rgb(255, 0, 255, 0.5)</code></p>
  <p>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.</p>
  <p><em>(I know both are Chrome based both these are the one I have downloaded)</em></p>
  <p>Related question : <a href="https://stackoverflow.com/questions/24538501/what-are-differences-between-rgb-vs-rgba-other-than-opacity">What are differences between RGB vs RGBA other than &#39;opacity&#39;</a></p>
  <hr>
  <h2>Here is my snippet</h2>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>dark grey 100% opacity
  
  &lt;div class="zero"&gt;dark green 100% opacity&lt;/div&gt;
  
  &lt;div class="oneFive"&gt;rgb yellow text 70% opacity&lt;/div&gt;
  &lt;div class="one"&gt;rgba yellow text 70% opacity&lt;/div&gt;
  
  &lt;div class="two"&gt;rgb 50% background opacity&lt;/div&gt;
  &lt;div class="three"&gt;rgba 50% background opacity&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>