12

I am learning the ins and outs of material design. Note that I am a developer, and have only recently decided to be a little more serious about UX. Google writes:

Limit your selection of colors by choosing three hues from the primary palette and one accent color from the secondary palette.

What does that actually mean? On the right they show that they picked Indigo, and three shades (100, 500, 700 ). Then again for the accent they picked from the "accent" selection in pink ( A200, and then fallback to A100 and A400).

Does that mean that a screen should ideally only use Indigo 100 (light), indigo 500 (normal) and indigo 700 (dark)? And then for accent, only Pink A200 (or A100 or A400)?

So:

1) Why three different shades of accents? 2) Did I get it right, in my understanding of it all? 3) The site https://www.materialpalette.com, once you pick your colors, also mentions "Divider color". What is that for? 4) Materialpalette.com also has colors for text/icons, primary text, secondary text. What's the difference between "text/icons" and "primary text"?

7

In fact it's quite simple, see answers below each of your questions:

1. Why three different shades of accents?

This is because you will need different states for buttons, nav bars and any other element that has subtle changes of color. While this is obviously most evident on hover, active or click button states, it's used in many other elements as well, see an example below where primary color has a darker hue for a second line of text:

enter image description here

which is based on this (see full page):

In long lists of complex information, consider using colored subheaders to delineate content. An example of the use of color for subheaders is in Android settings.

and of course, buttons: you will need to add hues and tints depending on the button state. These hues and tints are the 3 variations of the primary and secondary color, hence why you need them, see below:

Color version

enter image description here

Monochrome (light) version

enter image description here

2. The site https://www.materialpalette.com, once you pick your colors, also mentions "Divider color". What is that for?

Dividers are just that, dividers. You can see the different type of dividers here. As for divider color, Material recommends dividers to be 12% white for dark backgrounds, or 12% black for clear backgrounds. This is easily made by using RGBA colors. For example:

.divider{width:100%< height:1px; background:rgba(0,0,0,0.12)}

This way, by setting transparencies your divider will take not a set color, but your background's color + 12% of black (and same if it was 12% of white for dark backgrounds)

3. Materialpalette.com also has colors for text/icons, primary text, secondary text. What's the difference between "text/icons" and "primary text"?

OK, please don't take that site as a guideline, the official Material Design guidelines about color are very specific and leave no room for ambiguity . If you want to know about text, then your guideline should be Material Design: Text and Background Colors, not any other site, or you'll go crazy.

This being said, to answer your specific question: primary text color is 84% black on light backgrounds, and 84% white on dark backgrounds. There really isn't any other value, it's always the same. For secondary text, replace that 84% with 57%. And remember: these are just GUIDELINES, you can do whatever you want as long as it looks legible, but the fact is for Material Design, these values are static.

As for icon colors, they will always be white or black (or a very dark grey) depending on the color you chose for accent when in FAB (floating action buttons), but they get the primary text color if in regular backgrounds (light or dark). Here you may need to use your best judgment since it won't always fit fine, so don't get too attached to the "MUST BE", just make sure it works well and it's legible

  • I'm not a designer, but I think most examples of Material Design use way too much color (even the examples from Google). Clean white primary with a splash of accent color on primary accent buttons or tabbar indicators is good enough for me. I don't think I could ever see myself deploying a neon and purple AppBar to production. Half of the time when I see examples, I want to vomit. – SacWebDeveloper May 2 at 1:41
3

Why three different shades of accents?

My understanding is so that the additional accent shades are in case there is a need to have a lighter or darker accent. An example could be because the floating button sits half on a particular image for example where the contrast between the image and the related action is not as strong as it could be.

From the documentation, most of the time it mentions just one "accent" as I guess you should normally only need 1, but in their guidelines, there is scope for others if need be.

See : https://www.google.com/design/spec/style/color.html#color-color-schemes

enter image description here

The site Material Palette (https://www.materialpalette.com) also mentions "Divider color". What is that for?

When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.

So it is used to define the colour between lists of content.

See : https://www.google.com/design/spec/components/dividers.html#dividers-usage

Materialpalette.com also has colors for text/icons, primary text, secondary text. What's the difference between "text/icons" and "primary text"?

This one I am unsure about the difference so much, but I feel this might just be a bit of an oversight on MaterialPalette's part as it does not even change anything within their preview. But I think it is meant to change the colour of the icon within the floating button and would also be the same colour that is used for the text within a raised button.

See : https://www.google.com/design/spec/components/buttons.html#

enter image description here

Here is also a quick screenshot showing the Primary and Secondary.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.