Palettes is a responsive React app that facilitates the creation, management, and access of color palettes for your next design project. Simply add colors using the built-in color picker or generate random ones. Use the drag and drop functionality to rearrange the order of the colors. Once your palette is ready, save it by giving it a name and a descriptive emoji. To access the colors in your palette all you have to do is adjust the lightness level of the colors, and click on a color box to copy its HEX, RGB, or RGBA values.
https://v-poghosyan.github.io/palettes
Palettes is published on Github Pages at the following link.
If you wish to run Palettes locally instead follow these steps:
- Clone the project:
git clone https://github.com/v-poghosyan/palettes.git - Go to the project folder:
cd palettes; - Download the dependencies:
npm install; - Start the application:
npm start.
Material-UI : React components that implement Google's Material Design
Chroma.js : JS library for color manipulations
React-Color: For the color picker
Emoji-Mart : An emoji picker for React
RC-Slider: A slider component for the navbar
React-Sortable-HOC : Drag and drop functionality
React-Copy-to-Clipboard : Access to and manipulation of the user's clipboard
React-Form-Validator-Core : For form validation (making sure colors are unique, validating palette names, etc.)
React-Transition-Group : Animating React components and transitions between routes
GH-Pages : Deploying react apps to Github Pages