Как через свойство filter попасть в rgb цвет?

Question

Есть пример вот такой https://avgst.ru/services/painting, если выбрать фасад и цвет, то можно увидеть, что появляется img картинка сохраненная в png, те элементы которые закрашиваются, они зеленого цвета и на эту img накладывается filter с определенными значениями, вопрос в том, как они из rgb переводят в filter ? Даже не знаю как загуглить подобное

Answer 1

function colorChange(a, b, c) {
  document.getElementById("button").style.filter = `hue-rotate(${a}deg) saturate(${b})   brightness(${c})`;
}

.colorpicker {
  position: absolute;
  filter: hue-rotate(-45.1748deg) saturate(0.0672482) brightness(1.1716);
  width: 300px;
  height: 300px;
}

.button-1 {
  background: rgb(194, 198, 185);
}

.button-2 {
  background: rgb(181, 110, 54);
}

.button-3 {
  background: rgb(127, 146, 160);
}

<button onclick="colorChange(-45.1748, 0.0672482, 1.1716)" class="button-1">click me</button>
<button onclick="colorChange(-97.1797, 0.718667, 1.07101)" class="button-2">click me</button>
<button onclick="colorChange(81.8182, 0.21125, 0.946746)" class="button-3">click me</button>
<img class="colorpicker" id="button" src="https://avgst.ru/assets/images/outside-covering-green-facade-1.png"></img>

Картинку и значения hue-rotate, saturate и brightness взял с источника, что вы предоставили. Хорошо изучите манипуляции с цветом filter: для достижения желаемого вам цвета.

БЛОГ НА HUSL

Как через свойство filter попасть в rgb цвет?

Ответы (1 шт):