<ul class="colors">
  <li class="c1"></li>
  <li class="c2"></li>
  <li class="c3"></li>
</ul>
<div class="hero">
  <div class="tint"></div>
  <p class="claim">Instead of using another div (.tint) inside, you can use a pseudo class (:before) </p>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto:100);

body
{
    background: #212121;
    font-family: Roboto, Arial;
}
.colors
{
  position: absolute;
  left:5em;
  top:10%;
  z-index: 1;
}
.colors li
{
  float: left;
  margin: 0 10px 0 0;
  width:30px;
  height:30px;
}
.c1 { background-color: rgb(0, 77, 100);}
.c2 { background-color: rgb(165, 143, 118);}
.c3 { background-color: rgb(235, 91, 57);}
.hero
{
    height: 40em;
    background: url(http://wallpoper.com/images/00/34/14/30/mountains-clouds_00341430.jpg) no-repeat center;
    background-size: cover;
    position: relative;
}
.tint
{
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0, 77, 100, .6);
}
.claim
{
  color:#dbdbdb;
  font-size:2.5em;
  padding: 22% 7em 0 2em;
  position: relative;
 
}

var colorPickers = document.querySelectorAll('.colors li');

[].forEach.call(colorPickers, function (picker)
{
    picker.addEventListener('click', changeColor)
});

function changeColor()
{
  var colorValue = window.getComputedStyle(this, null).backgroundColor;
  var tintColor = colorValue.replace(')', ', .6)');
  tintColor = tintColor.replace('rgb', 'rgba');
  document.querySelector('.tint').style.backgroundColor= tintColor;
}