如何使用CSS将颜色填充成不规则形状？

Question

我的图像包含不规则的彩色形状，例如：

在这个例子中，标志是红色的，但它需要是可自定义的，所以我需要的是在那里只有一个轮廓并用CSS填充自定义颜色。

基本上，我需要允许用户选择rgb颜色来填充此轮廓而不填充整个图像。将其设置为图像父div的背景颜色是不可接受的，因为颜色只需要进入轮廓内部而不是外部。

我被告知可以使用过滤器来解决此问题，但我的搜索没有提供适用于此问题的任何示例。

有没有办法用CSS做到这一点？

编辑：你可以忽略红色内的渐变，我们可以用纯色填充整个标志以简化问题。