title: How to add color to grayscale images with css / html or javascript?
body: <p>I have a CP437 tileset:</p>
  
  <p><a href="https://i.stack.imgur.com/nQET4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nQET4.png" alt="enter image description here"></a></p>
  
  <p>which I want to use as a CSS sprite on a webpage Currently, I have a very simple markup and css:</p>
  
  <pre><code>.tile {
      display: inline-block;
      width: 16px;
      height: 16px;
  }
  
  .cp437-0 {
      background: url('tileset/tileset.png') 0 0;
  }
  
  .cp437-1 {
      background: url('tileset/tileset.png') 16px 0;
  }
  
  // ...
  
  &lt;span class="tile, cp437-0"&gt;&amp;nbsp;&lt;/span&gt;
  </code></pre>
  
  <p>This works very well, but I'd also like to add color to these grayscale sprites. How can I do this with using HTML/CSS or Javascript?</p>
  
  <p>Is it possible to set background color for the resulting image?</p>
  
  <p><strong>Clarification:</strong></p>
  
  <p>I'd like to be able to draw things like these to the browser window using the sprite:</p>
  
  <p><a href="https://i.stack.imgur.com/wwxcO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wwxcO.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/1vEVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1vEVm.png" alt="enter image description here"></a></p>