Wie berechnet man die erforderliche Farbtondrehung, um eine bestimmte Farbe zu erzeugen?
Lesezeit: 10 Minuten
Richard Parnaby-King
Ich habe ein weißes Bild, das ich als Hintergrund für ein Div verwende, und ich möchte es so färben, dass es der Hauptfarbe des Themas entspricht. Mir ist bewusst, dass ich Folgendes tun kann:
und durchradeln hue-rotate um eine Farbe zu finden, aber ist es möglich, diesen Wert im Voraus zu berechnen? Angesichts der Tatsache, dass der angegebene Hex-Wert ziemlich dunkel ist, nehme ich an, dass ich die einbeziehen muss invert(%) auch filtern.
Bei einem Hex-Wert von #689d94 Welche Mathematik muss ich tun, um das gewünschte zu berechnen? hue-rotate und invert wert, mein weißes Hintergrundbild in die gleiche Farbe umzuwandeln?
Bearbeiten
Hier ist ein Ausschnitt von a div mit einem weißen Hintergrundbild, das grün gefiltert wird. Der Trick dabei ist, dass es das Ganze ist div das wird gefiltert, nicht nur das Bild. Wenn ich etwas Text in die eingeben sollte div die Textfarbe würde auch grün werden.
Ist es möglich, einen Inline-Svg-Filter zu verwenden?
– Richard Parnaby-King
27. April 2015 um 8:23 Uhr
Betreff: „Ist es möglich, einen Inline-Svg-Filter zu verwenden?“ — Ja absolut – Siehe meine Antwort unten.
– Ωmega
25. Mai um 14:18 Uhr
Der Schlüssel in diesem Fall ist die Definition einer Anfangsfarbe. Weiß, Schwarz oder andere Graustufen sind technisch gesehen eine tatsächliche Farbe – Sie können sie nicht sättigen oder drehen. Sie müssen es irgendwie “einfärben”, und der Sepiafilter ist der einzige Filter, der eine Art Einfärbung durchführt.
Es wäre einfacher, wenn Ihr Bild zu 100 % rein rot wäre. Dann könnten Sie einfach den Zielgrad direkt hinzufügen und Sättigung und Helligkeit mit HSL für Ziel anpassen. Für einen weißen Startpunkt besteht der erste Schritt darin, eine Zwischenfarbe zu konvertieren und zu definieren, damit wir sie später sättigen und drehen können.
Lassen Sie uns zuerst das weiße Bild abdunkeln und Sepia anwenden, um eine “Grundfarbe” zu erhalten, mit der wir arbeiten können:
filter: brightness(50%) sepia(1);
Dies ergibt einen RGB-Farbwert von ungefähr:
rgb(178, 160, 128)
Schritt zwei besteht darin, das in den HSL-Farbraum zu konvertieren, was uns Folgendes gibt:
Diese beiden ersten Schritte sind statisch und ihr Ergebnis wird jedes Mal wiederverwendet, wenn wir eine Zielanpassung finden müssen (der tatsächliche Wert von Sepia ist definiert in der SVG-Filterspezifikation).
Jetzt müssen wir berechnen, was wir auf diese Grundfarbe anwenden müssen, um die Zielfarbe zu erhalten. Konvertieren Sie zuerst die Zielfarbe, zum Beispiel #689d94, wie in der Frage angegeben, in HSL:
hsl(170, 21.3%, 51.2%);
Dann müssen wir die Differenz zwischen diesen berechnen. Der Farbton wird berechnet, indem einfach die Basis vom Ziel abgezogen wird. Dasselbe gilt für Sättigung und Helligkeit, aber da wir 100 % des Basiswerts annehmen, müssen wir das Ergebnis von 100 % subtrahieren, um am Ende einen Unterschied für die akkumulierten Werte zu erhalten:
H: 170 - 38 -> 132°
S: 100 + (24.5 - 21.3) -> 103.2% (relative to base 100% = 3.2%)
L: 100 + (51.2 - 60.0) -> 91.2% (relative to base 100% = -8.8%)
Konvertieren Sie diese Werte in eine Filterzeichenfolge, indem Sie sie an den vorhandenen Filter anhängen, und legen Sie sie dann für das div fest:
/* ------ base color ------ ------- new target -------------------------------*/
filter: brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
Und um es einzustellen, würden Sie wahrscheinlich so etwas tun, vorausgesetzt, Filter und divElement sind bereits deklariert:
Beachten Sie, dass wahrscheinlich Rundungsfehler auftreten, da RGB als Ganzzahl dargestellt wird, während HSL ein Gleitkommawert ist, sodass das tatsächliche Ergebnis möglicherweise nicht genau ist, aber ziemlich nahe kommen sollte.
SVGs mit bereits eingestellter Farbe vordefinieren.
Arbeiten Sie mit HSL/RGB direkt in JavaScript und ändern Sie den SVG-Baum mit der Farbe direkt für die Form, anstatt Filter zu verwenden. Filter sind leistungsintensiv, besonders wenn viele wie hier verkettet sind und sie außerdem ein dominanter Teil einer Seite sind. Sie werden auch nicht in allen Browsern unterstützt.
Dies ist ein netter Versuch, aber völlig irreführend.
– schabunc
22. September 2018 um 20:12 Uhr
Diese Antwort ist falsch. Dafür gibt es eine präzise und elegante Lösung.
– Ωmega
25. Mai um 15:01 Uhr
Michael Mullany
Die akzeptierte Antwort ist falsch. Hue-Rotate bewahrt weder Sättigung noch Helligkeit und Sie müssen verrückte Berechnungen anstellen, um die richtigen Werte zu erhalten. Der weitaus einfachere Weg – der zu einem korrekten Ergebnis führt – besteht darin, einen CSS-Filter zu erstellen, der auf einen SVG-Filter verweist. Das Grundelement feColorMatrix in SVG-Filtern ermöglicht es Ihnen, eine Farbe direkt auszuwählen.
Nehmen Sie Ihre Farbe #424242 – teilen Sie jeden RGB-Kanalwert durch #FF und setzen Sie sie in die fünfte Spalte, die ersten drei Zeilen Ihrer Farbmatrix. In diesem Fall ist Hex #42 dezimal 68, also teilen Sie das durch 255 (#FF dezimal) und Sie erhalten 0,257 – was Sie in die fünfte Spalte, die ersten drei Zeilen, eingeben.
Das <filter> muss haben Ich würde (Ich habe den RGB-Hex-Code verwendet 689d94), damit wir es als Referenz verwenden können.
Da einige Browser (z. B. Firefox) den SVG-Filter nicht sehen/verwenden, wenn die display -Eigenschaft des SVG-Elements festgelegt ist noneund dieses SVG-Element im HTML-Code unpraktischerweise etwas Platz beanspruchen würde, ist der beste Weg, dieses SVG in einen reinen Inline-CSS-Filter umzuwandeln.
Um ein zu bekommen Inline-Filter value, nehmen Sie den oben aufgeführten SVG-Code, wandeln Sie ihn in eine einzelne Zeile um, indem Sie Zeilenumbrüche und unnötige Leerzeichen entfernen, und stellen Sie ihn dann voran url('data:image/svg+xml, und fügen Sie die zuvor genannten an Ich würde wie #689d94'):
Ist es möglich, einen Inline-Svg-Filter zu verwenden?
– Richard Parnaby-King
27. April 2015 um 8:23 Uhr
Betreff: „Ist es möglich, einen Inline-Svg-Filter zu verwenden?“ — Ja absolut – Siehe meine Antwort unten.
– Ωmega
25. Mai um 14:18 Uhr