white background image is a little bit blue

can we see the site please.
or upload that image on an image hoster like: https://postimages.org/
I have a hunch

on all my browsers here on OS X Catalina – ( Chrome, Firefox Developer, Safari ) i do not have that blue cast.
The overlay color is a pure gray. What do you want to accomplish with the overlay color?

the image above is a rgb image.
Are you using a child-theme ?

– see this site here: https://webers-testseite.de/cynthia/
i make a svg image that is near to your image divider.

This code in child-theme functions.php:

function insert_dividers(){
?>
<script>
(function($){

// just give a custom-class to the color-section or the slider : divider
// and a custom class for top or bottom position: top / bottom
// so there is in that input field f.e.:  "divider bottom"
  $('.avia-section.divider.top').prepend('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.avia-section.divider.bottom').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.divider.top .avia-slideshow .avia-slideshow-inner').after('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.divider.bottom .avia-slideshow').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_dividers');

this to quick css:

.avia-section.divider {
    position: relative !important;
}

.avia-section.divider .container a {
    z-index: 10;
}

.avia-section.divider svg {
    position: absolute;
    z-index: 5;
    width: 100vw;
}

.avia-section.divider svg.top {
    top: -2px !important;
    height: 150px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.avia-section.divider svg.bottom {
    bottom: -2px !important;
    height: 100px;
}

Now – how to insert the dividers:
you only have to give to a color-section – or a slider the class f.e. : divider bottom
then the divider will be inserted as inline svg. On that you can influence the fill color:

.avia-section.divider svg.top path {
  fill: #fff;
}
.avia-section.divider svg.bottom path {
  fill: #fff;
}

e.g. on that example page you see the section with the button “get in touch”
the following color-section has a different background-color!
just solve this by:

#av_section_3 svg.bottom path {
    fill: #c5e3ea;
}

or on top i gave to that color-section the custom-classes: divider top bottom
so there are two dividers in the same section