title: How to calculate required hue-rotate to generate specific colour?
body: <p>I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:</p>
  <pre><code>filter: sepia() saturate(10000%) hue-rotate(30deg);
  </code></pre>
  <p>and cycle through <code>hue-rotate</code> to find a colour, but is it possible to calculate this value in advance? Given that the specified hex value is quite dark, I imagine I will need to include the <code>invert(%)</code> filter as well.</p>
  <p>Given a hex value of <code>#689d94</code> what math do I need to do to calculate the desired <code>hue-rotate</code> and <code>invert</code> value to convert my white background image into the same colour?</p>
  <h2>Edit</h2>
  <p>Here's a snippet of a <code>div</code> with a white background image being filtered green. The trick here, is it is the whole of the <code>div</code> that is being filtered, not just the image. If I was to enter some text into the <code>div</code> the text colour would turn green as well.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
    background-size:5em;
    width:5em;
    height:5em;
    -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
    filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
  &lt;p style="background: #689d94"&gt;​&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>