Universal Dominant Color Finder extracts primary brand colors, clusters harmonized palettes using Median-Cut RGB bounding boxes, calculates weighted visual share percentages, evaluates WCAG 2.1 accessibility contrast, and outputs production-ready CSS and Tailwind design tokens all 100% client-side with zero server uploads.
⚡ Privacy-First • 100% Client-Side Quantizer
Universal Dominant Color Finder & Palette Studio
Extract dominant brand anchors, cluster harmonized color palettes, compute weighted pixel share %, inspect contrast ratios (WCAG 2.1), and export CSS/Tailwind design tokens in real time.
Dominant Primary
#2563EB • 0%
Extracted Swatches
8 Distinct Tones
Color Temperature
Neutral (5,500K)
Processing Engine
Canvas Quantizer
⚙️ Source & Parameters
Drag & Drop Image Here
Supports JPG, PNG, WEBP, AVIF, SVG, GIF & Clipboard Paste
Palette Size:
8 Swatches
Extraction Algorithm:
Sampling Sensitivity:
Export Code Syntax:
#FFFFFF
Weighted Image Area Coverage:
| Swatch | HEX | Color Space | Share % | Coverage Bar |
|---|
/* Generating color tokens... */
🔬 How Median-Cut Color Quantization Works
Median-Cut is a classic, robust color quantization algorithm. It treats all pixels as 3D points inside an RGB bounding box (VBox). By repeatedly splitting the box with the greatest volume and pixel density along its longest color axis at the median value, the color space is partitioned into clusters. The weighted center of mass for each box produces balanced, aesthetically accurate dominant swatches.
✨ Dominant vs. Accent vs. Vibrant Colors
Dominant Color is determined strictly by frequency and surface area coverage (the color occupying the largest pixel count). In contrast, Accent or Vibrant Colors may have a smaller presence but high saturation and contrast, drawing human attention. Use the "Dominant Vibrance" mode if you want punchy highlights instead of background tones.
👁️ Relative Luminance & WCAG 2.1 Accessibility Matrix
To calculate readability, the sRGB color values are linearised and transformed into relative luminance using formula:
L = 0.2126R + 0.7152G + 0.0722B. Contrast ratios against pure white and black are then derived: (L1 + 0.05) / (L2 + 0.05). Standards require at least 4.5:1 (AA) for body text and 7:1 (AAA) for high accessibility.
🔒 100% Client-Side Privacy Guarantee
All image decodings, pixel histogram aggregations, color quantization operations, and swatch card PNG renderings take place strictly within your web browser using HTML5 Canvas and vanilla JavaScript. Zero bytes of your photographs, logos, or artwork are ever transmitted to any remote server or third-party service.
✓
Copied to clipboard!