Проблема решена.
Оказалось все проще, закрашиваем те места где будет все статично, оставляем не закрашенным ту часть, где будем динамично подставлять цвета.
Выходит 2 картинки:
1) Цвет
2) Форма
В html, в одном блоке будет отображаться 2 картинки, вторая будет с абсолютным позиционированием, его выравниваем поверх первой картинки и все.
Пример кода html
<div class="pic">
<img src="color.jpg" class="bg">
<img src="form.png" class="face">
</div>
Пример кода Css
.pic img {
width: 100%;
}
.pic {
width: 400px;
position: relative;
background: white;
}
.pic .face {
position: absolute;
left: 0;
top: 0;
}
