ChoiPixel is a sleek, high-performance web application that allows users to extract precise color data from any image. Built entirely with Vanilla JavaScript, HTML5, and CSS3, it demonstrates the power of modern web standards without the bloat of external libraries.
- Zero Dependencies: Lightweight and fast, built using only native web technologies.
- Smart Image Upload:
- Drag & Drop support.
- File browsing.
- Clipboard Paste (Ctrl+V) support for instant workflow.
- Precision Color Picking:
- 10x Magnifier Loupe: Pixel-perfect selection with a crisp, pixelated zoom view.
- Dual Visual Preview: View your 'Locked' selection alongside a real-time 'Live' hover preview.
- Lock Mode: Click to freeze the color selection to easily copy values.
- Color Formats: Instant access to HEX and RGB values with one-click copying.
- Premium UI/UX:
- Dark mode aesthetics with glassmorphism elements.
- Smooth animations and transitions.
- Fully responsive design for all devices.
- Core: HTML5, CSS3, ES6+ JavaScript
- Rendering: HTML5 Canvas API
- Deployment: Designed for Cloudflare Workers Assets (Static Site)
You need a modern web browser to run this application. No installation is required.
-
Clone the repository:
git clone https://github.com/Choi-R/color-identifier.git
-
Open
index.htmlin your browser.Or use a local server for the best experience:
npx serve .
- Upload: Drag an image onto the drop zone, or simply press
Ctrl+Vto paste an image from your clipboard. - Explore: Hover over the image. A magnifier will appear to help you pick the exact pixel.
- Lock: Click anywhere on the image to Lock that color. The 'Selected' preview will freeze.
- Copy: Click the copy icons next to the HEX or RGB values.
- Resume: Click the image again to unlock, or click "Pick Another Image" to reset.
This project is open source and available under the MIT License.
Built with ❤️ by Choi