Free Online Material Design Color Tool

Free Online Material Design Color Tool

Recently Google added a new tool to Material Design toolbox. Color Tool is a free online site to create UI color palettes and test accessibility on the fly while creating a color scheme.

How to create color scheme using Color Tool

You will need to visit Color Tool page. On the right side of the screen, you can pick some of the predefined colors for Primary and Secondary color under Material Palette tab.
Pick some of the predefined colors from material design color pallete

If you want to create custom color palette then click on the Custom tab then click on the color wheel or type hex color number.
Create custom color

User Interfaces

There are two tabs on the left side of the screen: User Interfaces and Accessibility.

On the User Interfaces tab, you can see 6 different previews of the user interface with current color scheme applied (Primary + Secondary color).
User interfaces tab

Accessibility tab

Accessibility tab will tell you about the legibility of large and normal text with your current color scheme.
Accessibility tab

Play on Codepen

If you want to play and experiment on Codepen with some user interface elements like buttons, icons, snack bars... then click on the first icon in the top right corner.
Play on Codepen

Share color scheme

To share your color scheme click on the link icon in the top right corner. The permanent shareable link will be copied to your clipboard and you can send it to anyone through email or messaging apps.

Get shareable link


Popular posts from this blog

How to Change Artboard Size in Adobe Photoshop

Free Puzzle Pieces Actions For Photoshop and Elements

Old Weathered Vertical Wooden Planks Free Image