Skip to content

A quick color palette generator based on the 60/30/10 rule of UI design.

License

Notifications You must be signed in to change notification settings

jashgopani/colorinator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Colorinator

A quick color palette generator based on the 60-30-10 rule of UI design.

GitHub license GitHub stars GitHub issues GitHub forks

Colorinator Demo Gif

Features

  • Primary, Secondary and Accent colors are generated
  • Colors generated are NOT RANDOM ; they are derived using difference of contrast ratio
  • Font colors used are calculated based on contrast ratio with background color
  • Live preview of invert theme (swapping primary and secondary color)
  • Save themes to local storage for future use
  • Dynamic look of website makes it easy for you to visualize the look and feel of color palette
  • Navigate through the history of color palette

How to use ?

  • Simply paste the hex code which you want for your primary color, or click on the SHUFFLE button to fetch a primary color for you.
  • The website then generates you the complementary secondary and accent colors and applies to the whole website.
  • Use the < and > buttons to traverse through the history of colors generated.
  • Use the SAVE button to save the theme locally.
  • The INVERT THEME button swaps the primary and secondary color to give you a feel of 30-60-10 effect.

Future Releases

  1. Copy button on saved theme palettes, to individually copy the hex code to clipboard
  2. Import and Export palettes to sync between devices

Demand a feture / Report a bug

Raise an issue here and I'll act upon it based on its feasibilty 🙃