5

From the Material Design docs:

To create contrast between elements, you can use lighter or darker tones of your primary color. The contrast between lighter and darker tones helps show division between surfaces, such as between the status bar and a toolbar.

Looking at all the examples in the Material Design docs, light and dark colors are chosen from the same swatch as the base color. So for example, if your chosen color is 'Blue Grey 700' your light and dark colors may be 'Blue Grey 300' and 'Blue Grey 900'. This is one of the examples they show:

enter image description here

Using Google's Material Design Color Tool, we can select the same color, 'Blue Grey 700'. However, it suggests light and dark colors that are not from the 'Blue Grey' swatch:

enter image description here

For reference, here is the 'Blue Grey' swatch. You can see that the light (#718792) and dark (#1c313a) colors are not present:

enter image description here

The material design docs state:

They’ve [the M.D. colors] been designed to work harmoniously with each other

Should I use light and dark colors from the color swatch, OR can I just trust the Color Tool and use its suggested colors?

If I should trust the color tool, how does it generate the light and dark colors?

Improve this question

2 Answers 2

Reset to default
4

Use whichever works better in your application. This may sound like a non-answer, but it's really how design works. There is no "right" answer besides the one that is more along the lines of the way you want your application to look and feel.

Google's material design guidelines are just that - guidelines. They obviously used two different methods to compute the color combinations that you see and thus ended up with two different but similar results. One is not more correct or innately better than the other.

If you're looking to learn more about how to pick colors that go well together, check out some posts in the category such as Sources for Color Theory or Psychology of Color or perhaps get inspiration from the numerous color palette generators that are out there.

Improve this answer
3
0

Google's Material Design Color Tool uses chroma.js to generate the light and dark colors. They use the color.darken and color.brighten to generate the dark and light colors respectively.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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