Using CSS filters to collapse/shift color-mapping in complex, non-rgb way (to 4 hues)

Question

I have a web page I have designed with a specific color scheme, and I want to have 4 specific colors from that scheme to be the only hues present in my images. Essentially, I want to collapse four ranges of hues to four discrete hues. Within one hue I want to maintain the existing tints/brightness variation.

I would like to perform this shift using CSS filters.

I believe I would use feColorMatrix or feComponenentTransfer, however I cannot find an example that shows how to do this kind of shift with 4 or more colors (I only see examples of shifting rgb to either 2 colors, or shifting individually red, green, and blue, so that you go from a certain three color structure to a different three color distribution).

I would like to shift the images so that they only contains these 4 hues:

1. rgb(82, 79, 161)

2. rgb(0, 173, 220)

3. rgb(242,235,22)

4. rgb(183, 36, 103)

To clarify, this is a visual representation about I would like to see things shift:

You can use this example image:

Here's some basic code/snippet to get you started:

.four_colors {
 /*insert filter here */ 
  
}

<img class ="four_colors" src="https://i.sstatic.net/FGKUX.png">

If you can help, I'd appreciate it greatly!

Answer 1

This is not possible. The SVG Filter primitives that underly CSS Filters do not have HSL-aware primitives (although they should IMHO). Even the hue-rotate filter is a (bad) RGB approximation.

It is not possible to take hue ranges and posterize them. It IS possible to take RGB or brightness ranges and posterize them, so if you want to restate your question in that way, there are solutions. If you really want hue manipulation, you'll have to write that from scratch in Canvas.

By way of inspiration, here is an example of selective color selection using RGB in a filter:

http://codepen.io/mullany/pen/ApInK

 <filter id="redselect" color-interpolation-filters="linearRGB">
    <feColorMatrix in="SourceGraphic" result="BigRed"type="matrix" values="0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 0 0
                        3.8 -4 -4 0 -0.5" >
    </feColorMatrix>

    <feColorMatrix type="saturate" values="0" in="SourceGraphic" result="GreySource"/>
    <feComposite operator="in" in="SourceGraphic" in2="BigRed" result="RedOriginal"/>
    <feComposite operator="atop" in="RedOriginal" in2="GreySource" result="final"/>

</filter>