CSS filter: use hue rotation to change certain colors only (like Photoshop Hue/Saturation)

Question

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.

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:

Here, I chose the default range (Master), which means that all hue values will be considered.

Using CSS hue-rotate filter, we can have an approximate result to this:

Some colors are not exacly the same, due to the issues pointed out in this answer from another question: https://stackoverflow.com/a/19325417/4561405. (That's ok for me, I don't need it to be as accurate as Photoshop.)

So, essentially, the internal procedure for both approaches seems to be roughly the same.

Now, Photoshop also allows me to define a range of colors to be considered for adjustment, as seen in the picture below:

Essentially, what this range of values means is that any color with a hue vaue that falls off the range limits will be ignored. Hence, with my example, colors #1, #2 and #5 are left untouched.

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 (https://drafts.fxtf.org/filter-effects/), to see if there's anything there that I could use to define the ranges, but I can't find anything.

Does anyone knows if there's a way to do what I intend to? Any valid alternative to CSS filters, perhaps?

EDIT: this snippet show what I am getting with filter: hue-rotate(45deg), and the result that I want to obtain.

.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);
}

Original

  
  
  
  
  


With hue-rotate: 45deg;

  
  
  
  
  


What I want: update hue only for red colors

user_2142071 · Answer

This is actually quite difficult to do straight away, since the feColorMatrix handles colors in RGB and there's not yet a way to do that in HSL. (Correct me if I'm wrong.)

So I found a solution that comes close to what you might want. The idea is to first mask away the colors you don't want to hue-rotate. Then hue-rotate the remainder and paste that on top of the original.

The code for the SVG with filter looks something like:

To apply the filter, just add filter: url(#partial-hue-rotation) to an element's CSS.

To test to see if you are effecting the right colors/parts, you can add filter: url(#test-partial-hue-rotation); to an element's CSS. All white parts will be hue-rotated. (You might want to set the background color of the parent to black to see it.)

Notes and limitations:

This method only works when the colors you want to hue-rotate can be separated by a single RGB-channel. For example: all colors that have R-values > X. Then you put the 255 in the first column and -X in the last column of the alpha row in the matrix. (255 in second column for B-value selection, etc)
This is not a final solution, since all lighter colors (having R, G and B values that are probably higher then the threshold) will also be hue-rotated.
Obviously, since the alpha channel is used for masking, this only works on opaque colors/content.
Also, this filter is hardcoded for a specific color range and rotational value. So, not quite scalable, but perhaps useful for individual instances.
Apparently there's also a difference between how the CSS hue-rotate and feColorMatix's hueRotate is calculated (source). This might be eliminated by adding color-interpolation-filters="sRGB" to the hueRotate feColorMatrix tag (not sure).

Anyway, it is a first attempt at this and maybe this approach can help you on your way. :)

Working JSFiddle here

More information:

feColorMatrix documentation

For more information on how the color matrix for hue-rotate is calculated, see the C++ implementation of the Chrome browser.

See also matrix equivalents of shorthand filters.

And this post.

UPDATE: version 2

So after some reading and thinking, I came up with the idea to use the blend mode difference to provide the filter with the information about which colors are 'in range' and should be effected. This works as follows:

Fill the entire image (area) with the mid-color of your range (e.g. red).
Use in difference mode with the original and the flood. (The darkest parts have the most overlap with the mid-color, e.g. are closest to it on the color wheel.)
Invert the differences and convert them to average greyscale. (Since it's a pure numerical average we need, all channels are taken 0.3333 times.)
Using a feColorMatrix we now translate this greyscale to alpha values and at the same time map these to have the lowest 2/3 be transparent (will be removed).
Use feComposite to mask the original image and apply the effect (hue rotation) to this part only.
Then paste the effected part on top of the original.
Done!

The mid-point and width of the to-be-effected color range can be chosen:

Mid-color is set as the flood-color of the feFlood. (Use fully saturated and 50% lightness colors for best effect, so #ff0000, #00ff00, etc.)
Width is chosen by the alpha channel's offset in the feColorMatrix with result="alpha-mask". Example: keep 1/3 of the color wheel gives an offset value of (2/3) * -255.

Updated working JSFiddle here. (The bottom one, filter #partial-hue-rotation.)

Note: The hue rotation effect does a horrible job, so not sure what goes wrong there, but the resulting colors are the same with CSS's hue-rotate() filter.. so, yeah..

UPDATE: version 3

Unfortunately, the filter above does not work correctly for all colors. For a SVG filter that correctly converts the SourceGraphic to greyscale hue values (where 0deg = black and 360deg = white), have a look at the #hue-values filter I made in this JSFiddle.

If you want to only apply filter effects to all reds/greens/blues/cyans/magentas/yellows, the #tonegroup-select filter in the same JSFiddle can be used.

The code of this filter is:

In the comments inside the code, you find further information on the working and instructions on how to use it.

For more information and reference, have a look at:

CSS filter: use hue rotation to change certain colors only (like Photoshop Hue/Saturation)

1 Answers

UPDATE: version 2

UPDATE: version 3