Turns out that opacity doesn't evenly compound. If you have a layer of black at 20% opacity and a layer on top of that at 10%, the result is not 30%. If you're wanting a total of 30% in this scenario, that top layer should instead be 13%.

opacity.html

<div class="has-children">
  <div class="ten">
    10%
  </div>

  <div class="twenty">
    20%
  </div>

  <div class="thirty">
    30% (#b2b2b2)
  </div>

  <div class="twenty has-children">
    <div class="thirteen">
      13% atop 20% (#b2b2b2)
    </div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
  }

  div {
    color: white;
    margin: 0 0 15px;
    text-align: center;
    width: 200px;
  }

  div:not(.has-children) {
    padding: 15px;
  }

  .ten {
    background: rgba(0, 0, 0, .1);
  }

  .twenty {
    background: rgba(0, 0, 0, .2);
  }

  .thirty {
    background: rgba(0, 0, 0, .3);
  }

  .thirteen {
    background: rgba(0, 0, 0, .13);
  }
</style>