https://github.com/jashgopani/colorinator

A quick color palette generator based on the 60/30/10 rule of UI design.
https://github.com/jashgopani/colorinator

color colors generator npm react reactjs responsive-design theme theme-palette ui website

Last synced: 12 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jashgopani/colorinator
• Owner: jashgopani
• License: mit
• Created: 2021-04-28T08:45:46.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-24T12:40:56.000Z (about 5 years ago)
• Last Synced: 2025-04-07T12:52:00.166Z (about 1 year ago)
• Topics: color, colors, generator, npm, react, reactjs, responsive-design, theme, theme-palette, ui, website
• Language: JavaScript
• Homepage: http://jashgopani.github.io/colorinator
• Size: 3.55 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Colorinator

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

[![GitHub license](https://img.shields.io/github/license/jashgopani/colorinator?style=for-the-badge)](https://github.com/jashgopani/colorinator)

[![GitHub stars](https://img.shields.io/github/stars/jashgopani/colorinator?style=for-the-badge)](https://github.com/jashgopani/colorinator/stargazers)

[![GitHub issues](https://img.shields.io/github/issues/jashgopani/colorinator?style=for-the-badge)](https://github.com/jashgopani/colorinator/issues)

[![GitHub forks](https://img.shields.io/github/forks/jashgopani/colorinator?style=for-the-badge)](https://github.com/jashgopani/colorinator/network)

![Colorinator Demo Gif](./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](https://github.com/jashgopani/colorinator/issues) and I'll act upon it based on its feasibilty 🙃