9 Useful Tools for Creating Material Design Colour Palettes

16/11/2015

872

One of the biggest things you’ll notice in material design is the use of bold, vibrant colours.Material design’s colour guidelines describe the colour style as being “inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.”

If you need to generate material design colour palettes, these online tools will help.

In this tool, you start by picking your primary colour and accent colour. Afterwards, it will show you a live preview of the generated colour palette and offer you a variety of ways to download it.

Material palette color palette

This is a nifty “cheat sheet” that presents all of the material design colours on one page.

Cheat sheet that lists all the colors in one page

Do you want to let fate decide what your colour palette should be? Use this tool to randomly choose your material design colours.

Random material generator example

If you’re interested in creating a custom, material-design-like colour palette, check out this tool. First, you need to specify a colour — and it doesn’t have to be one of the official material design colours — using a colour picker dialogue window similar to the ones you can find in your favourite graphics editor. The Material Design Palette Generator will then generate colour swatches based on your chosen colour.

Material design palette generator example

This useful tool shows all material design colours in a conveniently compact grid layout. Click on a primary colour and accent colour to preview and generate your colour palette.

material mixer example

This tool displays just the 500 and A200 colours of material design colour swatches.

material design color swatches

This is another simple tool for visualizing material design colours. It shows the primary colours side-by-side. Clicking on a “colour bar” shows all of the colour swatches associated with that colour.

primary colors side-by-side

This tool displays just the material design 500 colours.

Material design 500 colors example

This simple tool helps you visualize all the material design colour swatches along with their official names (e.g. Pink, Light Blue, etc.).

designskilz's material Ddsign colors example

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 colour swatches right into your design software.