Material Design is Google’s design system. It’s things like colors, icons, and typography, but also patterns, animation, and principals.
Brand new on the Material Design site is the Color Tool.
It allows you to pick colors from the Material Palette, or entirely custom colors, and it shows you how that might look inside an UI:
Plus an accessibility audit, which warns you that certain colors of text have contrast problems for legibility (so don’t use them):
Then, click the
< > button in the upper right to hop right over to CodePen with your chosen colors and play with components.
This uses our Prefill API, which is free and available to anyone! It’s kinda like our templating URL structure:
Only with the Prefill API, no Pen has to exist for it to work, you can send code from anywhere.