React Colors App

View Demo · Report Bug

Table of Contents

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

About The Project

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

Features

• list default and custom palettes with ability to create/delete palettes
• create custom color palette that:
  • 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
• click on color box to copy color code with the ability to select the color format from:
  • HEX format
  • RGB format
  • RGBA format
• click on More button on each color box to generate colors from selected color

Built With

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

(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:

To get a local copy, follow these simple steps :

Installation

installing Locally

1. Clone the repo

   git clone https://github.com/abdrahmansoltan/React-Colors-App.git

2. go to project folder

   cd React-Colors-App

3. install dependencies

   npm install --force

4. Run development server

   npm start

(back to top)

---

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

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)