title: CSS - Darken on hover with unknown color
body: <p>I'm randomly generating colors into boxes of <code>50x50px</code> and when I hover them I want them to become darker, but remain the same color. </p>
  
  <p>I've tried setting <code>li:hover</code> to a dark color with transparency </p>
  
  <pre><code>background-color: rgba(91, 91, 91, 0.51) !important;
  </code></pre>
  
  <p>but it doesn't look good, it's making the whole <code>&lt;li&gt;</code> (which is the box I'm referring to) transparent on hover.</p>
  
  <p>How do I achieve this?</p>
  
  <p><a href="http://plnkr.co/edit/YUtNvx0wIQEsIzVuHtfL?p=preview" rel="noreferrer">Here is a Plunker</a>.</p>