Material Design Color Generator

A tool for generating a color palette for Material Design. ###Click here to view the tool!

What's New?

• 2/2/17 - Added support for Material UI's "Next" branch (React)
• 2/1/17 - Let the user select which color calculation algorithm they'd like to use. (constantin/traditional[mcg])
• 2/1/17 - Added the ability to link to a particular theme. URLs are now updated live as the theme is altered. Individual color alterations will not work with the URL method- use export/import.
• 2/1/17 - Added a "Demo" option that opens some basic AngularJS Material Design elements in the dynamic theme.
• 1/17/16 - Updated color calculation algorithms per the logic shared here. Thank you Constantin!
• 1/10/16 - Added support for Material UI (React)
• 1/10/16 - Added support for Ember Paper SCSS.
• 1/10/16 - Added support for AngularJS2 Material 2 Framework.
• 1/10/16 - Added ability to export in a format recognized for reimport by MCG. (Enables sharing of palettes)
• 12/18/15 - GitHub user Simon04 added support for automatic text-color contrast calculations. Thank you!
• 10/16/15 - Updated angular, it's dependencies, and other third party tools. Added SpeedDial from Material Design library.
• 10/9/15 - Import from AngularJS Material Design default palettes or from your own AngularJS Material Design Color Palette definition code!
• 10/9/15 - Added support for tinycolor.js instead of manual color manipulation.
• 7/22/15 - Improved Performance with more than 2 palettes.
• 7/14/15 - Support for COLOURlovers.com palettes. You may now select a top palette and instantly have a material design theme!
• 4/16/15 - Modify any one palette color.
• 4/14/15 - Export your color choices to the AngularJS Material Design theme declaration code.

Planned Future Enhancements

• (TOP) Determine which palette is primary, secondary, and so on. Drag and drop palettes.
• (MED) Remove individual color's hex details and create tooltip styled with all color details. (Hoverintent, populated only once it's opening, includes hex, rgb, cmyk, saturation, brightness. Possibly obtained using tinycolor)
• (MED) Improve performance by dynamically creating and destroying the color picker button and UI instead of loading a ton of Divs into the DOM for each color on the screen and hiding them.
• (LOW) Add reset buttons for each individual color in a palette (based on main palette color)
• (LOW) Create UI for more than 5 palettes (and/or alert user about dangers of using this many palettes)

Bugs and Questions

• Should you encounter a bug/problem or have a question about the tool please report it using GitHub's "Issues" feature here.

Contributions

• fireflight1 - Initial concept, starting code base.
• tkh44 - Optimizations/fixes
• simon04 - Contrast detection, bug fixes.
• Constantin - Color algorithm logic per stack overflow answer here.