Как преобразовать черный цвет в любой цвет, используя только фильтры CSS ⇐ CSS

[Anonymous]

Мой вопрос: учитывая целевой цвет RGB, какова формула перекрашивания черного цвета (

Код: Выделить всё

#000

) в этот цвет, используя только фильтры CSS?

Чтобы ответ был принят, необходимо предоставить функцию (на любом языке), которая будет принимать целевой цвет в качестве аргумента и возвращать соответствующую строку CSS-фильтра.

Контекстом для этого является необходимость перекрасить SVG внутри фонового изображения. В данном случае речь идет о поддержке определенных математических функций TeX в KaTeX: https://github.com/Khan/KaTeX/issues/587.

Пример

Если целевой цвет — #ffff00 (желтый), одно правильное решение:

Код: Выделить всё

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)

(демо)

Без целей

• Анимация.
• Решения без CSS-фильтров.
• Начиная с цвета, отличного от черного.
• Забота о том, что происходит с цветами, отличными от черного.

Результаты на данный момент

• Поиск грубой силы для параметров фиксированного списка фильтров: https://stackoverflow.com/a/43959856/181228
  
  Минусы: неэффективен, генерирует только некоторые из 16 777 216 возможных цветов (676 248 с hueRotateStep=1).
• Быстрое решение для поиска с использованием SPSA:
  https://stackoverflow.com/a/43960991/181228
  Назначено вознаграждение
• Решение с тенью:
  https://stackoverflow.com/a/43959853/181228
  
  Минусы: не работает на Edge. Требуется не-

  Код: Выделить всё

  filter

  Изменения CSS и незначительные изменения HTML.

Вы по-прежнему можете получить ответ Принято, отправив решение без грубой силы!

Ресурсы

• Как рассчитываются поворот оттенка и сепия:
  https://stackoverflow.com/a/29521147/181228
  Пример реализации Ruby:
  

  Код: Выделить всё

  LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
  HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = 0.2830
  
  def clamp(num)
  [0, [255, num].min].max.round
  end
  
  def hue_rotate(r, g, b, angle)
  angle = (angle % 360 + 360) % 360
  cos = Math.cos(angle * Math::PI / 180)
  sin = Math.sin(angle * Math::PI / 180)
  [clamp(
  r * ( LUM_R  +  (1 - LUM_R) * cos  -  LUM_R * sin       ) +
  g * ( LUM_G  -  LUM_G * cos        -  LUM_G * sin       ) +
  b * ( LUM_B  -  LUM_B * cos        +  (1 - LUM_B) * sin )),
  clamp(
  r * ( LUM_R  -  LUM_R * cos        +  HUE_R * sin       ) +
  g * ( LUM_G  +  (1 - LUM_G) * cos  +  HUE_G * sin       ) +
  b * ( LUM_B  -  LUM_B * cos        -  HUE_B * sin       )),
  clamp(
  r * ( LUM_R  -  LUM_R * cos        -  (1 - LUM_R) * sin ) +
  g * ( LUM_G  -  LUM_G * cos        +  LUM_G * sin       ) +
  b * ( LUM_B  +  (1 - LUM_B) * cos  +  LUM_B * sin       ))]
  end
  
  def sepia(r, g, b)
  [r * 0.393 + g * 0.769 + b * 0.189,
  r * 0.349 + g * 0.686 + b * 0.168,
  r * 0.272 + g * 0.534 + b * 0.131]
  end
  

  Обратите внимание, что указанный выше зажим делает функцию поворота оттенка нелинейной.
  
  Реализации браузера: Chromium, Firefox.
• Демо: получение цвета, отличного от полутонового, из серого цвета:
  https://stackoverflow.com/a/25524145/181228
• Формула, которая почти работает (из аналогичного вопроса):
  
  https://stackoverflow.com/a/29958459/181228
  
  Подробное объяснение того, почему приведенная выше формула неверна (CSS hue-rotate - это не истинное вращение оттенка, а линейное приближение):
  
  https://stackoverflow.com/a/19325417/2441511

Подробнее здесь: https://stackoverflow.com/questions/429 ... ss-filters