The Color Generator App is a React project that allows you to generate shades and tints of a chosen color. You can either input a specific hex value of a color or use the built-in color picker to select your desired color. The app then generates a range of shades and tints based on the selected color.
- Choose a color using the color picker.
- Input a hex value to select a specific color.
- Generate shades and tints of the chosen color.
- Preview the original color along with its shades and tints.
- Copy the hex values of generated colors to the clipboard.
- User-friendly interface and responsive design.
The Color Generator App utilizes the following libraries:
-
values.js: This library is used to generate shades and tints of colors. It allows the app to calculate a range of colors that are lighter or darker than the original color.
-
react-toastify: This library is employed to display toast notifications. Toast notifications provide feedback to the user when they perform actions such as copying a color's hex value. It enhances the user experience by providing unobtrusive notifications.
To run the Color Generator App locally on your machine, follow these steps:
-
Clone this repository to your local machine using:
git clone https://github.com/subhajitroycode/color-generator-app
-
Navigate to the project directory
cd color-generator-app -
Install the project dependencies using npm or yarn:
npm install # or yarn install -
Start the development server:
npm start # or yarn start -
Open your web browser and go to
http://localhost:3000to see the Color Generator App in action.
- Open the Color Generator App in your web browser.
- Use the color picker to choose a color or enter a hex value manually.
- Click the "Generate" button to generate shades and tints of the selected color.
- Explore the generated colors and their hex values.
- Click on a color's hex value to copy it to your clipboard.
- Enjoy experimenting with different shades and tints of colors!
Contributions to the Color Generator App are welcome! If you find any issues or have ideas for enhancements, feel free to open an issue or submit a pull request in the GitHub repository.