By default, the header is the grey color you mentioned.  The only way to change this in the branding editor is to add a header image.  If you want a solid color for the header, then this equates to adding a 1px (or slightly larger) solid color image.  

Another issue arises in that the Napili template for whatever reason, adds an overlay property to the header, which turns a bright red image to more of a murky maroon color.  To solve this you can do one of two things:  

1. Add a CSS property that removes the overlay of the header (you can use your browser's developer tools to inspect the DOM and figure out which element contains the overlay, it's fleeting me at the moment).
2. Create a lightning component that implements the forcecommunity:ThemeLayout and use a custom theme to control the header using the .css that comes as part of the lightning component bundle.  The forceCommunity:ThemeLayout interface also allows you to do some pretty cool stuff and make your community really stand out from the standard Napili template.  Here's an example of a custom theme I just mucked  with:

<aura:component implements="forceCommunity:themeLayout">

    <!-- Pre-defined set of Napili regions to include; each must be defined as an Aura attribute -->         
    <aura:attribute name="navBar" type="Aura.Component[]" required="false" />
    <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
    <aura:attribute name="search" type="Aura.Component[]" required="false" />
    <aura:attribute name="newHeader" type="Aura.Component[]" required="false" />

	<!-- Register initialization handler for component -->

    <!-- Theme Layout Markup -->
    <div>
    	<div class="header">
    		<div class="headerContent">
    			<div class="logoAndNavigation">
    				<img src="{!$Resource.MyCommunityResources + '/img/logo-small.gif'}" />
    					<div class="navigation">{!v.navBar}</div>
    			</div>

    			<div class="searchRegion">
    				{!v.search}
    			</div>

    			<div class="profileMenu">
    				{!v.profileMenu}
    			</div>
    		</div>
    	</div>
    </div>

    <div class="mainContentArea">
    	{!v.body}
    </div>
</aura:component>