Skip to content

Latest commit

 

History

History
38 lines (34 loc) · 3.01 KB

README.md

File metadata and controls

38 lines (34 loc) · 3.01 KB
Raw

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.