Verwenden von CSS-Filtern zum Kollazieren/Verschieben von Farbzuordnungen in komplexer, nicht-RGB-Weise (zu 4 Farbtönen)

Question

Ich habe eine Webseite, die ich mit einem bestimmten Farbschema entworfen habe, und ich möchte 4 bestimmte Farben aus diesem Schema haben die einzigen Farben in meinen Bildern zu sein. Im Wesentlichen möchte ich vier Farbbereiche auf vier diskrete Farbtöne reduzieren. Innerhalb eines Farbtons möchte ich die vorhandenen Farbtöne/Helligkeitsvariationen beibehalten.

Ich möchte diese Verschiebung mit CSS-Filtern durchführen.

Ich glaube, ich würde feColorMatrix oder feComponenentTransfer verwenden, aber ich kann kein Beispiel finden, das zeigt, wie man diese Art von Verschiebung mit 4 oder mehr Farben macht (ich sehe nur Beispiele für rgb entweder auf 2 Farben verschieben oder einzeln rot schalten) , Grün und Blau, so dass Sie von einer bestimmten Dreifarbenstruktur zu einer anderen Dreifarbenverteilung wechseln).

Ich möchte die Bilder so verschieben, dass sie nur diese 4 Farbtöne enthält:

1. rgb (82, 79, 161)

2. rgb (0, 173, 220)

3. rgb (242,235,22)

4. rgb (183, 36, 103)

Um zu klären, ist dies eine visuelle Darstellung über Ich möchte die Dinge sehen verschieben:

Hier einige grundlegende Code:

Sie dieses Beispiel Bild verwenden können/snippet, um loszulegen:

.four_colors { 
 
/*insert filter here */ 
 
    
 
}

<img class ="four_colors" src="http://i.stack.imgur.com/FGKUX.png">

Wenn Sie helfen können, würde ich es sehr schätzen!

Answer 1

Dies ist nicht möglich. Die SVG-Filter-Grundelemente, die CSS-Filtern unterliegen, haben keine HSL-bewußten Grundelemente (obwohl sie IMHO sein sollten). Selbst der Farbtonrotationsfilter ist eine (schlechte) RGB-Approximation.

Es ist nicht möglich, Farbtonbereiche aufzunehmen und zu vervielfältigen. Es ist möglich, RGB- oder Helligkeitsbereiche zu verwenden und diese zu vervielfältigen. Wenn Sie also Ihre Frage auf diese Weise neu formulieren möchten, gibt es Lösungen. Wenn Sie wirklich eine Farbtonmanipulation wünschen, müssen Sie diese in Canvas neu schreiben.

Als Inspiration, hier ist ein Beispiel für selektive Farbauswahl RGB in einem Filter verwenden:

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>