https://github.com/themiu/color-detect-from-image
Simple color detector to pick main colors from a image
https://github.com/themiu/color-detect-from-image
color-detector color-picker javascript
Last synced: about 2 months ago
JSON representation
Simple color detector to pick main colors from a image
- Host: GitHub
- URL: https://github.com/themiu/color-detect-from-image
- Owner: TheMIU
- Created: 2024-08-29T09:27:38.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-16T10:24:38.000Z (8 months ago)
- Last Synced: 2025-02-01T20:29:51.280Z (4 months ago)
- Topics: color-detector, color-picker, javascript
- Language: JavaScript
- Homepage: https://themiu.github.io/color-detect-from-image/
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 Color Picker Online
**Color Picker Online** is a simple web application that allows users to upload an image and extract multiple colors from the image. It displays these colors as hex values and shows a visual preview for each color.
## Features
- Upload an image to analyze the colors.
- Displays a small preview of the uploaded image.
- Extracts the most frequent colors from the image and shows them in a grid.
- Shows hex codes for each color.
- Responsive layout using Bootstrap.
## Technologies Used
- **HTML5**: Structure of the application.
- **CSS (Bootstrap)**: For styling and responsive design.
- **JavaScript (Vanilla)**: For handling image uploading, processing the image data, and rendering the color grid.
- **Canvas API**: Used to process the image and extract pixel data.
## Demo
🔗 https://themiu.github.io/color-detect-from-image/
## How It Works
1. The user uploads an image file using the file input.
2. The image is displayed in a small preview.
3. Using the `Canvas API`, the script extracts pixel data from the image.
4. The most frequent colors are calculated and displayed as color blocks with hex values.