Free Pixel Art Palette Color Counter and Sorter Tool

Application Specification: Pixel Art Color Analyzer & Sorter

Overview

A high-performance, single-file browser utility designed for pixel artists and game developers. This tool allows users to upload pixel art images to extract, count, and sort color palettes. It focuses on providing immediate feedback through a clean, responsive, and minimalist user interface.

Core Features

• Local Image Processing: Full image processing using HTML5 Canvas API; no server-side uploads.
• Frequency Histogram: Displays the exact count of how often each color appears in the image.
• Sorting Engine: Sort palettes by:
  • Hue (for color grouping)
  • Saturation
  • Lightness
  • Frequency (most used colors first)
• One-Click Copy: Easily copy individual hex codes or the entire color list to the clipboard.
• Visual Grid: A dynamic color swatch grid that displays the palette with hover-state previews.

UI Layout

• Header: Simple, clean typography showing the application title and a one-sentence instruction.
• Upload Section: A prominent, dashed-border drag-and-drop zone that handles image file input. Includes a subtle CSS animation on hover.
• Control Bar: A row of buttons to select sorting criteria and export the results.
• Main Results View:
  • Sidebar: Displays the image thumbnail and summary stats (total colors found, image dimensions).
  • Palette Grid: A responsive CSS grid containing color blocks, showing hex values and color swatches.

Visual Design & Aesthetics

• Palette:
  • Background: #F8FAFC (Cool white)
  • Cards/Containers: #FFFFFF with box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05)
  • Primary Accent: #3B82F6 (Vibrant blue)
  • Text: #1E293B (Dark slate)
• Interactions: Smooth transition: all 0.2s ease-in-out on all buttons and grid elements. Use subtle scaling transforms when hovering over color swatches.

Technical Implementation Directives

• Single File: All CSS and JS must be embedded within the single HTML file. Use external CDN links for essential assets like Tailwind CSS if needed.
• Memory Management: Do not use localStorage or sessionStorage. All data processing must exist in volatile memory.
• Sandboxing: Ensure all external links have rel="noopener noreferrer". Do not use alert() or confirm(); use a custom <div> modal overlaid on the screen for alerts.
• Performance: Optimize image processing by scaling down images to a smaller canvas size if the source image is excessively large, ensuring the UI remains responsive during analysis.