How In-Browser Colour Palette Extraction Works
Our in-browser colour palette extractor samples high-resolution pixel data from your uploaded image using HTML5 Canvas and the median-cut quantisation algorithm. By recursively subdividing colour bounding boxes in three-dimensional RGB colour space along their widest channel axis, the tool groups millions of image pixels into dominant clusters without transmitting a single byte across external networks.
Whether you need a balanced dominant palette for web branding, vibrant saturated tones for digital illustration, or muted aesthetic pastel swatches for interior moodboards, you can instantly customise the extraction style, sample individual pixels using the interactive eyedropper loupe, inspect WCAG 2.1 accessibility contrast ratios, and export clean tokens ready for CSS or Tailwind CSS.
100% In-Browser Privacy
All quantisation and image raster operations execute strictly inside your local web browser. Your private photographs, client brand assets, and screenshots never leave your computer.
WCAG Contrast Auditing
Ensure accessible typography before writing code. Every colour swatch provides real-time relative luminance calculation to score WCAG AA and AAA compliance against light and dark backgrounds.
Colour Harmony Generator
Select any extracted swatch to instantly calculate complementary, analogous, and triadic colour wheels in HSL space for cohesive UI and graphic design workflows.
Frequently Asked Questions
What image formats are supported?
The tool supports JPEG, PNG, WebP, AVIF, GIF, and vector SVG files. You can also paste screenshots directly from your clipboard using Ctrl+V.
How do I export the colour palette to my codebase?
Use the Export Studio below the swatches to generate CSS Custom Properties (:root { --colour-1: #...; }), Tailwind CSS color object configurations, or raw JSON structures. You can also download a beautifully styled PNG palette card for design presentations.
Is there any limit on image dimensions or file size?
Because processing occurs in your browser memory, there are no strict artificial limits. High-resolution photos are intelligently downscaled to an optimal analysis buffer for instantaneous palette calculation without freezing your UI.