Mobile app version of vmapp.org
Login or Join
Cody3331749

: 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

@Cody3331749

Posted in: #ColorTheory #GoogleMaterialDesign

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Cody3331749

2 Comments

Sorted by latest first Latest Oldest Best

 

@Turnbaugh909

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.

10% popularity Vote Up Vote Down


 

@Turnbaugh909

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme