title: CSS filter: use hue rotation to change certain colors only (like Photoshop Hue/Saturation)
body: <p>I was wondering if it is possible to perform a hue/saturation color transformation, using css/svg filters, in the same way that Photoshop Hue/Saturation works.</p>
  <p>Essentially, from what I've read, Photoshop internally converts all pixels from an RGB representation to a HSL representation, and basically increase the hue (H), saturation (S) or lightness (L) values according to what the user defines using the sliders, as seen in the image below:
  <a href="https://i.stack.imgur.com/QtDmi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QtDmi.png" alt="photoshop hue/saturation (default)" /></a></p>
  <p>Here, I chose the default range (<code>Master</code>), which means that <strong>all</strong> hue values will be considered.</p>
  <p>Using CSS <code>hue-rotate</code> filter, we can have an approximate result to this:
  <a href="https://i.stack.imgur.com/KMbVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KMbVm.png" alt="hue comparison" /></a></p>
  <p>Some colors are not exacly the same, due to the issues pointed out in this answer from another question: <a href="https://stackoverflow.com/a/19325417/4561405">https://stackoverflow.com/a/19325417/4561405</a>. (That's ok for me, I don't need it to be as accurate as Photoshop.)</p>
  <p>So, essentially, the internal procedure for both approaches seems to be roughly the same.</p>
  <p>Now, Photoshop also allows me to define a range of colors to be considered for adjustment, as seen in the picture below:
  <a href="https://i.stack.imgur.com/wMai5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wMai5.png" alt="hue adjustment with color range" /></a></p>
  <p>Essentially, what this range of values means is that any color with a <code>hue</code> vaue that falls off the range limits will be ignored. Hence, with my example, colors #1, #2 and #5 are left untouched.</p>
  <p>I am trying to do the same thing using CSS os SVG filters, but I can't find a way to do it. I'm reading the filter effect documentation (<a href="https://drafts.fxtf.org/filter-effects/" rel="nofollow noreferrer">https://drafts.fxtf.org/filter-effects/</a>), to see if there's anything there that I could use to define the ranges, but I can't find anything.</p>
  <p>Does anyone knows if there's a way to do what I intend to? Any valid alternative to CSS filters, perhaps?</p>
  <p><strong>EDIT:</strong> this snippet show what I am getting with <code>filter: hue-rotate(45deg)</code>, and the result that I want to obtain.</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>.block-wrapper {
    width: 100%;
    height: 50px;
    display: flex;
    margin-bottom: 10px;
  }
  
  
  .block {
    width: 20%;
    height: 100%;
  }
  
  
  .b1 {
    background-color: rgb(29 85 34);
  }
  
  .b1-goal {
    background-color: rgb(29 85 34);
  }
  
  .b2 {
    background-color: rgb(32 53 79);
  }
  
  .b2-goal {
    background-color: rgb(32 53 79);
  }
  
  .b3 {
    background-color: rgb(175 43 52);
  }
  
  .b3-goal {
    background-color: rgb(173 75 51);
  }
  
  .b4 {
    background-color: rgb(172 94 50);
  }
  
  .b4-goal {
    background-color: rgb(166 160 44);
  }
  
  .b5 {
    background-color: rgb(96 230 33);
  }
  
  .b5-goal {
    background-color: rgb(96 230 33);
  }
  
  
  .hue-45 {
    filter: hue-rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Original&lt;/h3&gt;
  &lt;div class="block-wrapper"&gt;
    &lt;div class="block b1"&gt;&lt;/div&gt;
    &lt;div class="block b2"&gt;&lt;/div&gt;
    &lt;div class="block b3"&gt;&lt;/div&gt;
    &lt;div class="block b4"&gt;&lt;/div&gt;
    &lt;div class="block b5"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h3&gt;With &lt;code&gt;hue-rotate: 45deg;&lt;/code&gt;&lt;/h3&gt;
  &lt;div class="block-wrapper hue-45"&gt;
    &lt;div class="block b1"&gt;&lt;/div&gt;
    &lt;div class="block b2"&gt;&lt;/div&gt;
    &lt;div class="block b3"&gt;&lt;/div&gt;
    &lt;div class="block b4"&gt;&lt;/div&gt;
    &lt;div class="block b5"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h3&gt;What I want: update hue only for red colors&lt;/h3&gt;
  &lt;div class="block-wrapper"&gt;
    &lt;div class="block b1-goal"&gt;&lt;/div&gt;
    &lt;div class="block b2-goal"&gt;&lt;/div&gt;
    &lt;div class="block b3-goal"&gt;&lt;/div&gt;
    &lt;div class="block b4-goal"&gt;&lt;/div&gt;
    &lt;div class="block b5-goal"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>