How should a coloured dropdown be styled using Google Material?

Question

I am working on a project which is using Google Material UI. I have a set of production statuses that need to be displayed - they are selectable from a list but I am not sure what that list should look like. Each status has it's own associated colour and would ideally be displayed in the list.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Are there ever any instances of coloured dropdown lists in Google Material? I have had a look and can't find any, nor does the Material site mention any dropdown that doesn't use a white background. As far as I can tell my options are:

1. Use the coloured list as pictured and set the hover states at 60% bg opacity

^{download bmml source}

2. Use a coloured dropdown box with white options, as per Google Material

^{download bmml source}

3. Use a coloured list as in option 1, but use the bg grey on hover

^{download bmml source}

All thoughts welcome and encouraged please!

Answer 1

Short answer: Use your second option, where each field has a neutral white color as the color is not classifing elements in the list.

---

Color should be used to give distinction with other elements from its context or to differentiate elements.

Think of the way links have color and not the surrounding text. For example (image source):

In the image above, an accent color is used to highlight a feature (distinct the column from the others). Difference in color (or opacity in this case) within the elements in the same column is used to indicate higher or lower values.

Now in your example colors are not giving any meaningful value nor distinction in comparison to the others. ("in comparison with the others" or "in it's context" is the point of what I mean)

Comparing a no-color list with a list full of colors, a colored list doesn't give any benefits in terms of differentiation between the elements. If all elements have a different color, better use the same color for all of them (or lack of color = white/grey/black).

If there would be two (for example) kinds of elements using color to differentiate could make sense:

In the example above color is giving extra information which is relevant for the user to choose. Blue are masculine names and pink are femenine names.

The color of the inputs should change when they are viewed (not in the edit mode, but in the view mode). And in that situation the color difference makes sense as the colored elements are distincted over normal (non-colored) elements.

Where there is color, hovering over an element should not be made using another color but rather lowering the opacity of the element.

Also consider colorblind users.

---

Edit:

I'll elaborate what I mean by differentiation and distinction, in case someone is interested.

This is just one color (for body text color use grey):

Using several colors (let's consider black and grey different colors for this example), we can differentiate elements:

Color can be used to give disctinction and purpose to an element:

To reinforce both properties (and benefit the color blind user and legibility) we can give extra styling:

Answer 2

Given your requirement:

Each status has it's own associated colour and would ideally be displayed in the list

Then we're not discussing if there should be a color or not, question is how to harmoniously display that color in a way compatible with Google Material Design?

Coloring the entire item is problematic:

• It's not aesthetically pleasant.
• It's problematic because of contrast with text.
• It's problematic for colorblind users.
• Hovering and focus will add more confusing color combinations.

Fortunately the problem has already been solved for color pickers. If you do not need any text it may as simple as this:

If you need some text you may try a traditional approach (example adapted from Grid samples in material.google.com):

Or, using round icon as we're used to see for avatars in GMail:

Note that layout may become much more complex and include long text (example again from Google):