Jak obliczyć wymagany odcień-Obróć, aby wygenerować konkretny kolor?

Mam biały obraz, który używam jako tło dla div, I chciałbym pokolorować, aby pasowały do głównego koloru motywów. Wiem, że potrafię: 

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

I przechodzić przez hue-rotate, aby znaleźć kolor, ale czy jest możliwe obliczenie tej wartości z góry? Biorąc pod uwagę, że podana wartość szesnastkowa jest dość ciemna, domyślam się, że będę musiał również dołączyć filtr invert(%).

Mając wartość hex #689d94 co mam zrobić aby obliczyć pożądaną wartość hue-rotate i invert aby przekonwertować moje białe tło na ten sam kolor?

Edit

Oto fragment div z białym obrazem tła filtrowanym na Zielono. Sztuczka polega na tym, że filtrowane jest całe div, a nie tylko obraz. Gdybym miał wprowadzić jakiś tekst do div, kolor tekstu również zmieniłby kolor na zielony.

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>
Author: Richard Parnaby-King, 2015-03-13
Source

3 answers

Kluczem w tym przypadku jest zdefiniowanie początkowego koloru. Biel, czerń czy szara skala to technicznie rzeczywisty kolor - nie można go nasycić ani obrócić. Musisz to jakoś "pokolorować", a filtr sepia jest jedynym filtrem, który wykonuje jakąś formę koloryzacji.

Byłoby łatwiej, gdyby twój obraz był czysty w 100% czerwony. Następnie możesz po prostu dodać stopień docelowy bezpośrednio i dostosować nasycenie i jasność za pomocą HSL dla celu. Dla punktu początkowego koloru białego pierwszym krokiem jest Konwertuj i zdefiniuj kolor pośredni, abyśmy mogli go nasycić i obrócić później.

Najpierw przyciemnijmy biały obraz i zastosujmy sepię, aby uzyskać kolor "bazowy", z którym możemy pracować: 

filter: brightness(50%) sepia(1);

Uzyskamy wartość koloru RGB w przybliżeniu: 

rgb(178, 160, 128)

Krok drugi to skonwertowanie tego do przestrzeni kolorów HSL, co daje nam: 

hsl(38, 24.5%, 60%);

Wynik koloru bazowego 

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>

Konwersja koloru podstawowego na kolor docelowy

Te dwa pierwsze kroki są statyczne, a ich wynik będzie ponownie używany za każdym razem, gdy będziemy musieli znaleźć dopasowanie celu (rzeczywista wartość sepia jest zdefiniowana w specyfikacji filtrów SVG ).

Teraz musimy obliczyć, co musimy zastosować do tego koloru podstawowego, aby uzyskać kolor docelowy. Najpierw przekonwertuj kolor docelowy, na przykład #689d94, jak podano w Pytaniu, na HSL: 

hsl(170, 21.3%, 51.2%);

Następnie musimy obliczyć różnicę między nimi. Odcień oblicza się po prostu odejmując Baza od celu. To samo dotyczy nasycenia i jasności, ale ponieważ zakładamy 100% wartości bazowej, musimy odjąć wynik od 100%, aby skończyć z różnicą dla nagromadzonych wartości: 

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%)

Konwertuj te wartości na łańcuch filtrów, dołączając go do istniejącego filtra, a następnie ustaw go w div: 

/*      ------ base color ------  -------  new target -------------------------------*/
filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

I aby go ustawić, prawdopodobnie zrobiłbyś coś takiego zakładając, że Filter i divElement są już zadeklarowane: 

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

Zauważ, że istnieje prawdopodobieństwo zaokrąglenia błędy, ponieważ RGB jest reprezentowane jako liczba całkowita, podczas gdy HSL jest zmiennoprzecinkowy, więc rzeczywisty wynik może nie być dokładny, ale powinien być bardzo blisko.

Przykład na żywo 

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>

Realnymi alternatywnymi opcjami są:

  • Predefiniuj pliki SVG z już ustawionym kolorem.
  • Pracuj z HSL/RGB bezpośrednio w JavaScript i modyfikuj drzewo SVG za pomocą koloru bezpośrednio dla kształtu, a nie za pomocą filtrów. Filtry są kosztowne pod względem wydajności, zwłaszcza, jeśli wiele z nich jest przykutych łańcuchami, jak tutaj i są dodatkowo dominującą częścią strony. Nie są one obsługiwane we wszystkich przeglądarkach.
 49
Author: epistemex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:31:35

Przyjęta odpowiedź jest błędna. Hue-rotate nie oszczędza nasycenia ani jasności i musisz wykonać szaloną matematykę, aby wymyślić prawidłowe wartości. Znacznie łatwiejszym sposobem - co da poprawny wynik - jest wykonanie filtra CSS, który odwołuje się do filtra SVG. Fecolormatrix primitive w filtrach SVG pozwala wybrać kolor bezpośrednio - Tak. Weź swój kolor # 424242-podziel wartość szesnastkową każdego koloru przez #FF (.257) i umieść je w piątej kolumnie, pierwsze trzy rzędy koloru matrix. TAK: 

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>
 7
Author: Michael Mullany,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-03 02:22:27

If svg are being used then ...

Możesz otworzyć pliki svg za pomocą edytora tekstu skopiuj i wklej do pliku html, a następnie zmień kolor ścieżki zgodnie z wymaganiami.

W poniższym przykładzie kodu... Właśnie zmieniłem kolor ścieżki środkowego pierścienia. Mam nadzieję, że to pomoże..

        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>

Dla obrazka tła 

        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
Author: Azi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-28 17:52:03