title: Why does the CSS filter hue-rotate produce wierd results?
body: <p>I'm trying to <a href="https://stackoverflow.com/questions/29458666">emulate Photoshop's "Color Overlay" using CSS filters</a>, and while doing so, found out the CSS filters operate on colors as consistently as an epileptic seizure.</p>
  
  <p>Consider the color <code>#FF0000</code>. If we rotate its hue by <code>120deg</code>, we should get <code>#00FF00</code>, and by <code>240deg</code> we should get <code>#0000FF</code>. This is the realm of sanity. Now let's enter CSS filters:</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>body { font: bold 99px Arial }
  span { color: #F00; }
  .daltonics-wont-notice {
      -webkit-filter: hue-rotate(120deg);
      filter: hue-rotate(120deg);
  }
  .precision-is-overrated {
      -webkit-filter: hue-rotate(240deg);
      filter: hue-rotate(240deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="red"&gt;☺&lt;/span&gt;
  &lt;span class="daltonics-wont-notice"&gt;☹&lt;/span&gt;
  &lt;span class="precision-is-overrated"&gt;☹&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What should be <code>#00FF00</code> is <strong><code>#007100</code></strong>, and what should be <code>#0000FF</code> is <strong><em><code>#0132FF</code></em></strong>. <em>By using <code>hue-rotate</code>, the hue, saturation and brightness have been set to nonsensical levels, cross-browser.</em></p>
  
  <p>I need to catch up with Cthulhu and figure out what logic He coded so I can work around it.</p>
  
  <p>Is this a wierd color space unrelated to <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" rel="noreferrer">HSV or HSL</a>? Is it possible to translate HSV, HSL or RGB coordinates into this whimsical dimension? Does it have a name? A standard? A cult following?</p>