title: How can I change the tint of an emoji with CSS?
body: <p>I would like to change the tint of an emoji, e.g. if I have a yellow smiley, I would like to change its color tone so that it appears red.</p>
  
  <p>This very naïve approach does not work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red-emoji {
    font-size: 2em;
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="red-emoji"&gt;this text is red, but that emoji is not → &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to achieve this:</p>
  
  <p><a href="https://i.stack.imgur.com/BxFPl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BxFPl.png" alt="emoji tinted red"></a></p>
  
  <p>I made this image with Photoshop by adding an adjustment layer, I hope modern CSS has something similar (filters or something) that I can use to achieve this.</p>