Skip to content

Discover an array of color shades and tints with the Color Generator App, a dynamic React project. Effortlessly input hex color values or use the color picker to explore. Powered by 'values.js' and 'react-toastify', enhancing user experience. Unleash your creativity and enjoy experimenting with colors.

Notifications You must be signed in to change notification settings

subhajitroycode/color-generator-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Color Generator App

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.

Color Generator App Screenshot

Features

  • 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.

Libraries Used

The Color Generator App utilizes the following libraries:

  1. 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.

  2. 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.

Installation

To run the Color Generator App locally on your machine, follow these steps:

  1. Clone this repository to your local machine using:

    git clone https://github.com/subhajitroycode/color-generator-app
  2. Navigate to the project directory

    cd color-generator-app
  3. Install the project dependencies using npm or yarn:

    npm install 
    # or
    yarn install
  4. Start the development server:

    npm start
    # or
    yarn start
  5. Open your web browser and go to http://localhost:3000 to see the Color Generator App in action.

Usage

  1. Open the Color Generator App in your web browser.
  2. Use the color picker to choose a color or enter a hex value manually.
  3. Click the "Generate" button to generate shades and tints of the selected color.
  4. Explore the generated colors and their hex values.
  5. Click on a color's hex value to copy it to your clipboard.
  6. Enjoy experimenting with different shades and tints of colors!

Contributing

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.

Connect with Me

About

Discover an array of color shades and tints with the Color Generator App, a dynamic React project. Effortlessly input hex color values or use the color picker to explore. Powered by 'values.js' and 'react-toastify', enhancing user experience. Unleash your creativity and enjoy experimenting with colors.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published