AppLayout navbar background color is a bit "wrong"

Hi all,

I am trying to change the navbar background color of my custom AppLayout so I followed all the directions I could find. Namely I have a custom css with this:

    background-color: #8261EE !important;

which I then load into my app like so:

@CssImport(value = "./styles/main-layout.css", themeFor = "vaadin-app-layout")
public class MainLayout extends AppLayout {

The problem is that the resulting color is not what I expect: it looks more like the color I put in blended in with a white-ish color and the result is quite awful. Any idea how to fix that?