Material Design Missing Colors

First thing you notice on viewing the Material Design guidelines suggested UI-color-palette that it is somewhat uneven its color groupings as we have no accent colors for Brown, Grey and BlueGrey. And at first you migth guess that if your text colors are dark than these colors might make nice soft shadow colors as the Paper and Ink metaphor seems to call out for soft shadows.

That might be Partially correct. The color groupings; Red, Pink, Purple, Deep Purple, Indigo, Blue, Ligth Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, and BlueGrey were chosen so as to be able harmoniously mix for brnading the app and the tonality control of the message.

But, I think there is a more concrete and better explanation. By the way the coor groupings selection is based on contemporary architecture and art. Probably greco and baroque. The pickig of 3 to four colors in s single colur grouping and accent colors in another color grouping is part of those particular styles.

THAT DOES NOT MEAN, do not add more tones of the color grouping to get the degree of tonality that branding your app requires.

HOW DO I KNOW THIS IS TRUE? Other than it opposes the iOS design bias of placing or stuffing the iOS design guide down our throats for android applications that start-ups and firms insist on doing to us android developers.

Okay, what is Google’s intent on this subject?

The arbitrator is that little material colors file in the folder res/values(you can rather than use adb and explore a device you have look in the sdk in the platforms folder under data/res/values):

not the whole file, just the important snippet

<! — Primary & accent colors →
 <eat-comment />

<color name=”material_grey_900">#ff212121</color>
 <color name=”material_grey_850">#ff303030</color>
 <color name=”material_grey_800">#ff424242</color>
 <color name=”material_grey_600">#ff757575</color>
 <color name=”material_grey_300">#ffe0e0e0</color>
 <color name=”material_grey_100">#fff5f5f5</color>
 <color name=”material_grey_50">#fffafafa</color>

<color name=”material_deep_teal_200">#ff80cbc4</color>
 <color name=”material_deep_teal_500">#ff009688</color>

<color name=”material_blue_grey_800">#ff37474f</color>
 <color name=”material_blue_grey_900">#ff263238</color>
 <color name=”material_blue_grey_950">#ff21272b</color>

You see Google is not only treating the color groupings as the color groupings to choose from but than adding the degrees of tonality they need by adding color chips to each used color grouping.

For example grey 850 is probably subtracting the hex number for grey 800 from grey 900 and dividing by 2. And than taking that difference and adding it to grey 800 to get grey 850. Not that hard, I do not think.

The degrees to tonality are:

Red, hot and reactive

Yellow, warm

Blue, cold ice

Grey, less dark and harsh

Black, silence

Well, you get the idea.

Please understand that Mac UI was designed for desktop PCs that had lots of space. iOS people took the success of the revitalized Apple as the signal that they did not have to think about design just copy what Apple does in its own iOS apps. Even its own AppStore Apple apps are not the top popular apps Google’s are. All the advice you get from these design iOS biased people who copycat everyone else is wrong. You need to question it and debunk it because most people with the design label and a mac or iphone are not designers but copycats and copy what others do without fully understanding why that does not work for their app as far as getting the most audeince imapct as possible in the positive direction.

In summary what I am stating is that those are the color groupings, yes, but that is not the full material design color palette. But, Google would prefer that you only start adding the degrees of tonality to each color grouping as your need for that tonality evolves in the discovery of the connection between your branding message and the visual appearance of your application.

That is the 2nd implied message Google is sending to us in not putting the full Material Design color palette in the Material Design Guidelines…ie not template it but discover it via the visual design human-made-manual process. In other short blog posts I stated I would do a gimp gpl file with the missing colors but would go against Google’s intent for you to discover what tonality you needed in your branding and message and to add those color chips to your own palette AND I believe that to be very important in the design process of your android application that you should not take a short-cut through that process by relying upon someone’s template of a full Material Design color palette.