background и прозрачность
 

У меня есть svg-файл для задника.

Вот как он выглядит (соответственно, могу менять заливку этих бубликов внутри svg-кода)


Далее, имеется следующий дизайн-проект



То, что выше и ниже, я обрезал. Застрял именно на данном этапе.

Применил для верхней трети (What we offer) полупрозрачный фон - сработало; а дальше никак не могу выйти на нужные цвета фона и бубликов. Подскажите пожалуйста, как можно умело жонглировать RGB и RGBA, может быть есть конвертеры, фильтры, написанные на JS. Спасибо

Прозрачность определяется по формуле

цветИзначальный = (цветВидимый - ((1-прозрачность)*цветФона)) / прозрачность

далее имея два цвета, для которых известны цвет фона и видимый цвет, можем составить систему уравнений и найти изначальный цвет + прозрачность.

Но проще забить на прозрачность: каждому диву задавать непрозрачный фон, окрашивая svg теми цветами, что мы видим конкретно на макете, потому как всё равно каждому отдельному блоку - отдельно и бублик красить.

А дизайнера за такие дела - по мордасам, по мордасам, объясняя в процессе, что не стоит использовать в вебе режимы смешивания отличные от normal. По крайней мере пока.

Конечно если нужна поддержка только суперновых браузеров, то можно использовать background-blend-mode, конекртные значения для которого и для прозрачности взять напрямую из макета. (если макет только jpg - добавить дизайнеру ещё)