Как вычислить необходимый оттенок-поворот для генерации определенного цвета?

У меня есть белое изображение, которое я использую в качестве фона для div, и я бы хотел, чтобы цвет соответствовал основным цветам тем. Я знаю, что могу:

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

и перейдите через hue-rotate, чтобы найти цвет, но можно ли заранее рассчитать это значение? Учитывая, что указанное шестнадцатеричное значение довольно темное, я полагаю, что мне нужно будет включить и фильтр invert(%).

Учитывая шестнадцатеричное значение #689d94, какую математику нужно сделать, чтобы вычислить желаемое значение hue-rotate и invert для преобразования моего белого фонового изображения в один цвет?

Изменить

Здесь показан фрагмент div с белым фоном, который фильтруется зеленым цветом. Трюк здесь, это то, что все div фильтруется, а не только изображение. Если бы я ввел текст в div, цвет текста также стал бы зеленым.

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>

ОТВЕТЫ

Ответ 1

Ключ в этом случае должен определить начальный цвет. Белый или черный или любой серый цвет технически является фактическим цветом - вы не можете насытить или повернуть его. Вам придется "раскрасить" его как-то, и фильтр сепии является единственным фильтром, который выполняет некоторую форму раскраски.

Было бы проще, если бы ваш образ был чистым на 100% красным. Затем вы можете просто добавить целевую степень напрямую и настроить насыщенность и легкость, используя HSL для цели. Для начальной точки белого цвета первым шагом является преобразование и определение промежуточного цвета, чтобы мы могли насытить и повернуть его позже.

Позволяет сначала затемнить белое изображение и применить сепию для получения "базового" цвета, с которым мы можем работать:

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

Это приведет к получению значения цвета RGB приблизительно:

rgb(178, 160, 128)

Шаг второй - преобразовать его в цветовое пространство HSL, которое дает нам:

hsl(38, 24.5%, 60%);

Результат базового цвета

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>

Ответ 2

Принятый ответ неверен. Hue-rotate не сохраняет насыщенность или яркость, и вам нужно делать сумасшедшую математику, чтобы придумать правильные значения. Более простой способ - который приведет к правильному результату - это сделать фильтр CSS, который ссылается на фильтр SVG. Примитив feColorMatrix в фильтрах SVG позволяет вам выбирать цвет напрямую - например, так. Возьмите свой цвет # 424242 - разделите каждое шестнадцатеричное значение цвета на #FF (.257) и поместите их в пятый столбец, первые три строки вашей цветовой матрицы. Например:

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>

Ответ 3

Если svg используется, тогда...

Вы можете открыть svg файлы с помощью некоторого текстового редактора, скопировать и вставить в html файл, а затем изменить цвет пути по мере необходимости.

В приведенном ниже примере кода... Я просто изменил цвет пути центрального кольца. Надеюсь, это поможет.

        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>