Technical Specification: Free Online Image Color Picker and Hex Extractor

Overview

This single-file web application serves as an advanced, client-side utility for extracting color data from images. By utilizing the browser's native canvas API, the application enables users to upload an image and click any pixel to retrieve its specific color values (Hex, RGB, HSL) without the data ever leaving the user's local machine.

Feature List

• Client-Side Processing: Zero server interaction. All logic is performed locally.
• Image Upload System: Supports Drag & Drop or traditional file picker functionality.
• Real-Time Pixel Sampling: Uses a high-performance canvas element to read pixel data upon user click.
• Multiple Color Formats: Automatic generation of HEX, RGB, and HSL values for every sampled color.
• Clipboard Integration: One-click "Copy to Clipboard" functionality with visual feedback (toast animation).
• Volatile Palette History: An on-screen panel that keeps track of the last 10 sampled colors during the current session. Note: History resets on page refresh due to no-storage constraint.
• Responsive Design: The tool scales automatically to fit mobile, tablet, and desktop viewports.

UI/UX Design Specification

• Aesthetic: Strictly light-mode. Use a clean, professional aesthetic featuring white backgrounds (#FFFFFF), light gray surfaces (#F8FAFC), and vibrant blue accents (#2563EB) for primary actions.
• Layout Components:
  • Header: Simple, descriptive title and a brief instructional subtitle.
  • Main Interaction Area: A large, drop-shadowed card acting as the drop zone and image container. Upon upload, this converts into the interactive canvas preview.
  • Sidebar/Bottom Panel: A sticky or fixed panel displaying the currently selected color swatch, its specific code values, and a history of recently picked colors.
• Micro-Interactions:
  • Hover Effects: Smooth scale or shadow lifts on interactive elements.
  • Copy Toast: A non-intrusive notification element that fades in and out when a code is copied successfully.
  • Transitions: Use CSS transition: all 0.3s ease for all layout shifts and color changes.

Technical Constraints & Directives

• Single File: All HTML, CSS (Tailwind via CDN), and Vanilla JavaScript must be contained in one <file>.html.
• Sandbox Compatibility:
  • DO NOT use localStorage or any permanent storage. Maintain palette history in a standard JS array.
  • DO NOT use alert() or prompt(). Create a custom <div> modal or notification system for user feedback.
  • Use blob: URLs for image handling to ensure local-only processing.
• Performance: Optimize canvas event listeners to prevent lag during mouseover/click interactions. Use requestAnimationFrame if implementing live preview tracking.

Implementation Steps

1. Setup Structure: Define the grid/flex layout for the main tool area and sidebar.
2. File Handling: Implement FileReader API to load images into an <img> element, then draw to canvas.
3. Canvas Logic: Attach click event listeners to the canvas, using ctx.getImageData(x, y, 1, 1) to extract [r, g, b, a] values.
4. Color Conversion: Write helper functions to convert RGB array to Hex and HSL strings.
5. State Management: Create an array to track current session colors, updating the DOM dynamically.
6. Styling: Apply the "SaaS" aesthetic using system fonts (Inter, sans-serif) and clean border-radius (0.5rem).