: How do you choose 'light' and 'dark' shades in Google Material Design From the Material Design docs: To create contrast between elements, you can use lighter or darker tones of your primary
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:
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:
For reference, here is the 'Blue Grey' swatch. You can see that the light (#718792) and dark (#1c313a) colors are not present:
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?
More posts by @Cody3331749
2 Comments
Sorted by latest first Latest Oldest Best
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.
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 color-theory 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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.