- 4 min. read
William CraigCEO & Co-Founder
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
One of the biggest things you’ll notice in material design is the use of bold, vibrant colors. Material design’s color guidelines describe the color style as being “inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.” If you need to generate material design color palettes, these online tools will help.
P.S. Try our free HTML Color Picker tool to find the best design colors for your website!
In this tool, you start by picking your primary color and accent color. Afterwards, it will show you a live preview of the generated color palette and offer you a variety of ways to download it.
This is a nifty “cheatsheet” that presents all of the material design colors in one page.
Do you want to let fate decide what your color palette should be? Use this tool to randomly choose your material design colors.
If you’re interested in creating a custom, material-design-like color palette, check out this tool. First, you need to specify a color — and it doesn’t have to be one of the official material design colors — using a color picker dialog window similar to the ones you can find in your favorite graphics editor. The Material Design Palette Generator will then generate color swatches based on your chosen color.
5. Material Mixer
This useful tool shows all material design colors in a conveniently compact grid layout. Click on a primary color and accent color to preview and generate your color palette.
This tool displays just the 500 and A200 colors of material design color swatches.
This is another simple tool for visualizing material design colors. It shows the primary colors side-by-side. Clicking on a “color bar” shows all of the color swatches associated with that color.
This tool displays just the material design 500 colors.
9. designskilz’s Material Design Colors
This simple tool helps you visualize all the material design color swatches along with their official names (e.g. Pink, Light Blue, etc.).
Material Design Color Plugins for Graphics Editors
If web tools aren’t your thing, you can instead install a plugin/extension that integrates the material design color swatches right into your design software.
- For Photoshop / Illustrator: Google provides downloadable Adobe color files (.aco) to make it easier to develop your color palette within Photoshop and/or Illustrator.
- For Sketch: Check out the open source Material Design Color Palette Sketch Plugin by Koji Ishimoto.
- For Gimp / Inkscape: You’ve got a couple of options: gimp-material-design-color-palette by KiSSFLOW and material-design-colors by Soichiro Kashima.
Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter.
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
WebFX is a full-service marketing agency with 1000+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
- 1. Material Palette
- 2. Material UI’s Material Design Colors
- 3. Random Material Generator
- 4. Material Design Palette Generator
- 5. Material Mixer
- 6. Material Colors
- 7. MaterialUp’s Material Design Colors
- 8. Tint UI’s Material Design
- 9. Designskilz’s Material Design Colors
- Material Design Color Plugins for Graphics Editors
- Read Next