Secondary color is a light version of the primary color

Question

I'm working on an Android app that has an odd colour scheme, originally written for iOS with an iOS design. The primary colour is navy blue (#031740). They use light blue as an accent colour. Now, the design guidelines state that you shouldn't do that (in the secondary color section):

Material design Guidelines - color

As they use red (#d0011b) as well, we agreed that we can use this as a secondary color. But when I added a red floating action button, they found it awful and wanted to stick to light blue.

Is the light blue acceptable as a secondary colour? Here is the palette in the Color Tool:

Color Tool with light blue

Or should I try to convince them to use red (or any other)?

Color Tool with red

Answer 1

The Material Design guidelines are exactly that; guidelines. You don't have to follow what they say to the letter. They're meant to help you with the design process and create a consistent visual language; if they start being a hinderance and prevent you from being consistent with your own branding then they aren't doing their job...

The Google Design article Expressing Brand in Material says:

If you’ve developed a strong color story for your brand, stick with it. There is nothing more disorienting to a user then suddenly feeling like he or she has entered a different product space in the UI. Material design provides a simple, smart approach to building harmonious color stories, regardless of whether you use the palette or apply your own color story to the system. The key is the way in which color is applied to the UI.

So your own branding should trump the Material guidelines. That article has a lot to say on using Material Design with an existing brand and is worth a read.

Even without taking that in to acount, the guidelines say (which I assume is what you're referring to):

A secondary color ... should not simply be a light or dark variation of your primary color.

But a few lines later, say:

It’s not necessary if you use variations of your primary color to accent elements.

So the guidelines are pretty contradictory. Basically, your secondary color shouldn't be a variation of your primary color... unless you use a variation of your primary color and you simply don't call it a secondary color...

So, if it works... use it.

The important part of the color guidelines are ensuring sufficient color contrast, frequency of accents, accessibility and legibility, but you should be able to follow those with any color (using tints and shades thereof if needs be).

(If you're asking from a design point of view which color you should use then I wouldn't want to answer that without seeing it in context, knowing about the app and what it does, its target audience, the brand, etc... without any of that, either is fine.)

Answer 2

It's often a hard job to sync to a client's taste so what I will give you is a tool that will help you make things a loooooot easier:

The color tool allows you to set a primary color (in your case #031740) and then go through a predefined list of secondary colors and show you a fast preview of what it will look like. You simply need to set up a meeting with your client and to through this together:

Or you can use the material design palette to come up with a new color scheme, it's awesome cause you can then download the custom XML and just add it to your project: