React-Color-App

View Demo · Report Bug

Table of Contents

1. About The Project
   • Built With
   • Features
2. Getting Started
   • Installation
3. Contributing

About The Project

A clone of websites like Flat UI Colors and Material UI Colors using React.

Built With

• React
• Material-UI
• React Color
• chroma-js
• emoji-mart
• rc-slider
• react-copy-to-clipboard
• react-material-ui-form-validator
• react-router
• react-transition-group
• svg-backgrounds

Features

• List default palettes with ability to delete palettes
• Create custom color palette:
  • contains colors entered by user through color picker or (Random Color) button
  • enable user to change the order of ColorBoxes by Drag & Drop
  • enable user to save custom palette with name and emoji 🚀
• Explore color palettes and generate different color levels with slider
• Click on color box to copy color code with the ability to change the color format from:
  • HEX format
  • RGB format
  • RGBA format
• Click on More button on each color box to generate different shades from selected color

(back to top)

---

Getting Started

This project require some perquisites and dependencies to be installed, you can view it online using this demo. or you can find the instructions below:

Installation

To get a local copy, follow these simple steps :

1. Clone the repo

   git clone https://github.com/ahmedalam98/React-Color-App.git

2. go to project folder

   cd REACT-COLOR-APP

3. install dependencies

   npm install --force

4. Run development server

   npm start

(back to top)

---

Contributing

Contributions are always welcome!

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Acknowledgments

• Colt