<div class="turquoise"><p>Turquoise</p><span>#1abc9c</span></div>
<div class="emerland"><p>Emerland</p><span>#2ecc71</span></div>
<div class="peterriver"><p>Peter River</p><span>#3498db</span></div>
<div class="amethyst"><p>Amethyst</p><span>#9b59b6</span></div>
<div class="wetasphalt"><p>Wet Asphalt</p><span>#34495e</span></div>
<div class="greensea"><p>Green Sea</p><span>#16a085</span></div>
<div class="nephritis"><p>Nephritis</p><span>#27ae60</span></div>
<div class="belizehole"><p>BelizeHole</p><span>#2980b9</span></div>
<div class="wisteria"><p>Wisteria</p><span>#8e44ad</span></div>
<div class="midnightblue"><p>Midnight Blue</p><span>#2c3e50</span></div>
<div class="sunflower"><p>Sun Flower</p><span>#f1c40f</span></div>
<div class="carrot"><p>Carrot</p><span>#e67e22</span></div>
<div class="alizarin"><p>Alizarin</p><span>#e74c3c</span></div>
<div class="clouds"><p>Clouds</p><span>#ecf0f1</span></div>
<div class="concrete"><p>Concrete</p><span>#95a5a6</span></div>
<div class="orange"><p>Orange</p><span>#f39c12</span></div>
<div class="pumpkin"><p>Pumpkin</p><span>#d35400</span></div>
<div class="pomegranate"><p>Pomegranate</p><span>#c0392b</span></div>
<div class="silver"><p>Silver</p><span>#bdc3c7</span></div>
<div class="asbestos"><p>Asbestos</p><span>#7f8c8d</span></div>
@import url(https://fonts.googleapis.com/css?family=Lato:700);

*,
*:before,
*:after { 
  box-sizing: border-box
}
html, body {
  color: #fff;
  font-family: 'Lato';
  font-size: 16px;
  width: 100%;
  height: 100%;
}
div {
  box-shadow: inset 0 0 0 3px transparent;
  float: left;
  display: block;
  width: 20%;
  height: 25%;
  position: relative;
  transition: box-shadow 0.5s ease;
  
  &:hover,
  &:active {
    box-shadow: inset 0 0 0 3px #666;
    cursor: pointer;
  }
}
p {
  bottom: 5px;
  left: 5px;
  margin: 0;
  padding: 0;
  position: absolute;
  text-transform: uppercase;
}
span {
  bottom: 25px;
  left: 5px;
  position: absolute;
}
.turquoise { background: #1abc9c; }
.emerland { background: #2ecc71; }
.peterriver { background: #3498db; }
.amethyst { background: #9b59b6; }
.wetasphalt { background: #34495e; }
.greensea { background: #16a085; }
.nephritis { background: #27ae60; }
.belizehole { background: #2980b9; }
.wisteria { background: #8e44ad; }
.midnightblue { background: #2c3e50; }
.sunflower { background: #f1c40f; }
.carrot { background: #e67e22; }
.alizarin { background: #e74c3c; }
.clouds { background: #ecf0f1; color: #777; }
.concrete { background: #95a5a6; }
.orange { background: #f39c12; }
.pumpkin { background: #d35400; }
.pomegranate { background: #c0392b; }
.silver { background: #bdc3c7; }
.asbestos { background: #7f8c8d; }
View Compiled
// there's no easy way to copy to clipboard yet :'(
/*
function initClickAndCopy() {
  document.querySelector('body').addEventListener('click', function(event) {
    var node = event.target;
    if (node.nodeName === 'DIV') {
      console.log(node.querySelector('span').innerText);
    }
    return true;
  }, false);
}

if (window.addEventListener) {
  window.addEventListener("load", initClickAndCopy, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", initClickAndCopy);
} else {
  window.onload = initClickAndCopy;
}
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.