jashgopani / colorinator

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

Home Page:http://jashgopani.github.io/colorinator

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 🙃

About

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

http://jashgopani.github.io/colorinator

License:MIT License


Languages

Language:JavaScript 70.4%Language:CSS 22.2%Language:HTML 7.4%