it-swarm.com.de

Wie berechnet man den gewünschten Farbton, um eine bestimmte Farbe zu erzeugen?

Ich habe ein weißes Bild, das ich als Hintergrund für ein div verwende, und ich möchte die Hauptfarbe des Themas farblich anpassen. Ich weiß, dass ich Folgendes tun kann:

filter: sepia() saturate(10000%) hue-rotate(30deg);

und durchlaufen Sie hue-rotate, um eine Farbe zu finden. Ist es jedoch möglich, diesen Wert im Voraus zu berechnen? Da der angegebene Hex-Wert ziemlich dunkel ist, kann ich mir vorstellen, dass ich auch den invert(%)-Filter verwenden muss.

Mit einem Hex-Wert von #689d94. Was muss ich tun, um den gewünschten hue-rotate- und invert-Wert zu berechnen, um mein weißes Hintergrundbild in dieselbe Farbe zu konvertieren?

Bearbeiten

Hier ist ein Ausschnitt eines div mit einem weißen Hintergrundbild, das grün gefiltert wird. Der Trick dabei ist, dass nicht nur das Bild, sondern die gesamte div-Datei gefiltert wird. Wenn ich etwas Text in das div eingeben würde, würde die Textfarbe ebenfalls grün werden.

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
  filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}
<div>
  </div>

47

Der Schlüssel ist in diesem Fall die Definition einer Ausgangsfarbe. Weiß oder Schwarz oder 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 Sepia-Filter ist der einzige Filter, der irgendeine Form der Einfärbung vornimmt.

Es wäre einfacher, wenn Ihr Bild zu 100% aus reinem Rot besteht. Dann können Sie einfach den Zielgrad direkt hinzufügen und die Sättigung und Helligkeit mithilfe von HSL für das Ziel anpassen. Für einen weißen Startpunkt der Farbe 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 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 ist konvertiert das in den HSL-Farbraum , was uns gibt:

hsl(38, 24.5%, 60%);

Basisfarbe Ergebnis

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: brightness(50%) sepia(1);
  filter: brightness(50%) sepia(1);
}
<div></div>

Grundfarbe in Zielfarbe konvertieren

Diese beiden ersten Schritte sind statisch und das Ergebnis wird jedes Mal wiederverwendet, wenn eine Zieleinstellung gefunden werden muss (der tatsächliche Wert von sepia ist in der SVG Filters-Spezifikation definiert).

Nun müssen wir berechnen, was wir auf diese Grundfarbe anwenden müssen, um die Zielfarbe zu erhalten. Konvertieren Sie zunächst 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 wenn wir 100% des Basiswerts annehmen, müssen wir das Ergebnis von 100% subtrahieren, um am Ende einen Differenzwert für die angesammelten 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 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 festzulegen, würden Sie wahrscheinlich so etwas tun, vorausgesetzt, filter und divElement sind bereits deklariert:

...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;

Beachten Sie, dass es wahrscheinlich zu Rundungsfehlern kommt, da RGB als Ganzzahl dargestellt wird, während HSL Fließkommazahl ist. Das tatsächliche Ergebnis ist daher möglicherweise nicht genau, aber es sollte ziemlich nahe kommen.

Live-Beispiel

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
  filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
}
<div></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>

Mögliche Alternativen sind:

  • Definieren Sie SVGs mit der bereits festgelegten Farbe.
  • 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 in Bezug auf die Leistung teuer, vor allem, wenn viele wie hier verkettet sind und außerdem einen dominanten Teil einer Seite darstellen. Sie werden auch nicht in allen Browsern unterstützt.
58
user1693593

Die akzeptierte Antwort ist falsch. Beim Farbton-Drehen bleibt die Sättigung oder Helligkeit nicht erhalten, und Sie müssen verrückte Berechnungen durchführen, um die korrekten Werte zu erhalten. Der weitaus einfachere Weg, der zu einem korrekten Ergebnis führt, besteht darin, einen CSS-Filter auszuführen, der auf einen SVG-Filter verweist. Mit dem Grundelement feColorMatrix in SVG-Filtern können Sie eine Farbe direkt auswählen. Nehmen Sie Ihre Farbe # 424242 - teilen Sie den Hexwert jeder Farbe durch #FF (.257) und fügen Sie sie in die fünfte Spalte, die ersten drei Zeilen Ihrer Farbmatrix, ein. So wie:

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: url(#colorize);
  filter: url(#colorize);
}
<div>
  </div>

<svg>
<defs>
<filter id="colorize" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 1 0"/>
 
/filter>
</defs>
</svg>

11
Michael Mullany

Wenn SVG verwendet wird, dann ...

Sie können SVG-Dateien mit einem Texteditor öffnen und in die HTML-Datei einfügen und die Pfadfarbe nach Bedarf ändern.

In Beispielcode ... Ich habe gerade die Pfadfarbe des Mittelrings geändert. Hoffe das hilft..

        var imgg =document.getElementById("path");
        imgg.style="fill:#424242";
   
<html>
<body>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="imgg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px">
<g>
	<path  d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971   C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/>
	<path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971   c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/>
	<path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971   c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/>
	<path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971   c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/>
	<path id="path" d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559   c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559   C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821   c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822   c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    
    
</body>
</html>

Für hintergrundbild

        var myimg='url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px"><g><path  d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971   C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/><path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971   c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/><path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971   c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/><path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971   c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/><path d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559   c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559   C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821   c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822   c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg> \')';
        
        document.getElementById("mydiv").style.backgroundImage =myimg ;  
        
        
        
        //changing color according to theme .. new theme color :#424242
        myimg=myimg.replace(/#91DC5A/g,"#424242");
       document.getElementById("mydiv").style.backgroundImage =myimg ; 
             div {

  background-size:5em;
  width:5em;
  height:5em;
  
}
<html>
<body>

    
    <div id="mydiv"></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>
   
  
    
</body>
</html>

0
Azi