AppLayout navbar background color is a bit "wrong"

Flow
1

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:

[part="navbar"]
 {
    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?

Thanks
-GT