Online Image Color Palette Extractor & Contrast Checker
Upload or paste any image (PNG, JPG, WebP, SVG) to extract dominant brand colors, test WCAG 2.1 accessibility contrast compliance against dark and light themes, and export CSS/Tailwind tokens instantly.
Supports PNG, JPG, WebP, GIF, SVG • You can also press Ctrl+V to paste
Evaluates legibility of text against white and black backgrounds according to WCAG 2.1 Level AA (min 4.5:1) and AAA (min 7:1) criteria.
| Color | Hex / RGB | vs. White (#FFF) | White Status | vs. Black (#000) | Black Status | Relative Luminance |
|---|
Designing Cohesive, Accessible Color Palettes from Images
Modern digital design systems require color schemes that are not only aesthetically harmonious but also accessible to users with low vision, color blindness, or varying monitor calibrations.
How Color Quantization Operates
Digital photographs contain hundreds of thousands of distinct RGB color values. To generate a functional design palette, our in-browser quantization engine partitions color space using median cut partitioning:
- Sampling: Downsamples the raw pixel array onto an offscreen canvas to optimize performance without sacrificing fidelity.
- Clustering: Recursively splits RGB bounding boxes along the channel with the highest variance (Red, Green, or Blue) until reaching the target swatch count.
- Luminance Normalization: Ranks colors by relative frequency and visual saliency.
WCAG Contrast Requirements
- Level AA (Minimum): 4.5:1 contrast for body copy / regular text (under 18pt), 3:1 for large text (18pt+ or 14pt bold) and user interface components.
- Level AAA (Enhanced): 7:1 contrast for regular text, 4.5:1 for large text.