GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → edelstone → Material Palette Generator

edelstone / Material Palette Generator

🎨 Get perfect Material Design color palettes from any hex color.

Labels

htmlmaterial-designtoolcolor-schemecolorshexpalette

Projects that are alternatives of or similar to Material Palette Generator

Tints And Shades
🌈 Display tints and shades of a given hex color in 10% increments.
Stars: ✭ 228 (+100%)
Mutual labels:  hex, color-scheme, colors
Gradstop
JavaScript micro library to generate gradient color stops 🏳️‍🌈
Stars: ✭ 144 (+26.32%)
Mutual labels:  hex, color-scheme, colors
Nord
An arctic, north-bluish color palette.
Stars: ✭ 4,816 (+4124.56%)
Mutual labels:  color-scheme, palette, colors
anypalette.js
🎨 Read/write all color palette file formats ❤🧡💛💚💙💜
Stars: ✭ 41 (-64.04%)
Mutual labels:  palette, colors, color-scheme
Colorful
A curated list of awesome resources to choose your next color scheme
Stars: ✭ 702 (+515.79%)
Mutual labels:  color-scheme, colors
Iroiro
Beautiful Colors Lookup in CLI
Stars: ✭ 470 (+312.28%)
Mutual labels:  palette, colors
Color.js
Extract colors from an image (0.75 KB) 🎨
Stars: ✭ 42 (-63.16%)
Mutual labels:  palette, colors
Colorschemes.jl
colorschemes, colormaps, gradients, and palettes
Stars: ✭ 55 (-51.75%)
Mutual labels:  color-scheme, colors
React Color Extractor
A React component which extracts colors from an image
Stars: ✭ 314 (+175.44%)
Mutual labels:  hex, colors
Oceanic Next Gnome Terminal
Oceanic Next theme for GNOME Terminal
Stars: ✭ 47 (-58.77%)
Mutual labels:  color-scheme, palette
Color Names
Large list of handpicked color names 🌈
Stars: ✭ 1,198 (+950.88%)
Mutual labels:  palette, colors
Birthdaybuddy
A simple material-design orientated app to handle your friends' birthdays and other special events
Stars: ✭ 90 (-21.05%)
Mutual labels:  tool, material-design
Sorted Colors
A tool to sort the named CSS colors in a way that it shows related colors together
Stars: ✭ 167 (+46.49%)
Mutual labels:  tool, colors
Material Design Colors
Palette for Android Material Design colors.
Stars: ✭ 25 (-78.07%)
Mutual labels:  material-design, palette
Image Palette
Generate a WCAG compliant color theme from any image
Stars: ✭ 331 (+190.35%)
Mutual labels:  palette, colors
Color Schemer
A React app to help you select a color scheme, built with styled-components and polished
Stars: ✭ 55 (-51.75%)
Mutual labels:  color-scheme, colors
Create Mui Theme
online tool for creating material-ui themes
Stars: ✭ 80 (-29.82%)
Mutual labels:  tool, material-design
Yui
Minimal vim color scheme
Stars: ✭ 93 (-18.42%)
Mutual labels:  color-scheme, colors
Values.js
🍇 Get the tints and shades of a color
Stars: ✭ 97 (-14.91%)
Mutual labels:  hex, colors
Colorpicker
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
Stars: ✭ 271 (+137.72%)
Mutual labels:  palette, colors
View All Similar Projects ➔

 Material Design Palette Generator

What is this?

This is a (slightly modified) clone of the official Material Design palette generator. It does a couple things:

  1. Builds you a full color palette from a given hex color
  2. Provides you with complementary colors based off your primary color

Both are based on Material Design standards, and use Google's algorithm for color derivation.

Why is this?

Google's official palette generator is embedded and buried deep within the Material docs. Since it's an inline tool, it's also hidden from search engines, making it difficult to discover or bookmark.

To make it a little easier to access and to preserve it for my own future use, I grabbed the obfuscated code (the original scripts do not appear to be public anywhere) and added some small interface improvements. I did not change the way colors are derived.

Plugins

After creating palettes and exporting the JSON data, Sketch users can create shared layer styles easily with the Sketch JSON Color Palette Importer plugin.

Support this project

This tool will always be free but your support is greatly appreciated.

Feedback and contributing

If you notice a problem or want a feature added please file an issue on GitHub. You can also just email me the details.

If you're a developer and want to help with the project, please comment on open issues or create a new one. Once we agree on a path forward you can just make a pull request and take it to the finish line. No big whoop.

Credits

  • Hi, I'm Michael Edelstone. You might also be interested in the Tint & Shade Generator, another useful color tool I made.
  • Most of this is copyright Google Inc. If you do anything with their code, please maintain the licenses they indicate at the top of the large files.
  • You can use any of my modifications without credit, except...
  • Favicon image courtesy of Roundicons and pulled from flaticon.com. If you reuse it, please continue to credit the creator.

Many thanks to Ziya Fenn for their valuable contributions to this project.

Tech

It's just HTML, CSS, and JavaScript. Run it locally on your favorite server.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].