Skip to content

React application that allows users to upload an image and interact with it by hovering their mouse over different parts of the image.

Notifications You must be signed in to change notification settings

georgeolson92/colornamer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Colornamer

Colornamer is a React application that allows users to upload an image and interact with it by hovering their mouse over different parts of the image. The app displays the hex code and the potential name of the color at the hovered location, making it easier to identify and work with colors.

Features

  • Upload Image: Upload an image to analyze the colors.
  • Color Detection: Hover over the uploaded image to see the hex code and potential name of the color.
  • Responsive UI: Works smoothly on both desktop and mobile devices with mouse and touch support.

Demo

https://colornamer.vercel.app/

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing.

Prerequisites

  • Node.js (version 16 or later)
  • npm or yarn

Installation

Clone the repository:

git clone https://github.com/yourusername/colornamer.git
cd colornamer

Install dependencies:

Using npm: npm install

Or using yarn: yarn install

Start the development server:

Using npm: npm start

Or using yarn:
yarn start

The app will open in your default browser at http://localhost:3000.

Getting Started

  1. Upload an image by clicking the upload button or dragging and dropping an image file into the designated area.
  2. Hover your mouse over the image to see the hex code and the name of the color at the hovered location.
  3. View the details of the detected colors in real-time.

Built With

  • React - JavaScript library for building user interfaces.

Contributing

Contributions are welcome! Feel free to submit a pull request or open an issue if you have any suggestions or find a bug.

  1. Fork the project.
  2. Create your feature branch (git checkout -b feature/YourFeature).
  3. Commit your changes (git commit -m 'Add some feature').
  4. Push to the branch (git push origin feature/YourFeature).
  5. Open a pull request.

Contact

For any questions or suggestions, please reach out at olsongeorgej@gmail.com.

About

React application that allows users to upload an image and interact with it by hovering their mouse over different parts of the image.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published