Image Color Extractor
Advanced client-side color analysis tool. Extract dominant palettes via Median Cut algorithms, pick pixel-perfect colors with a magnifier loupe, and audit WCAG contrast ratios for web accessibility.
Drag & Drop an image here
or paste from clipboard
About
Color extraction is not merely about identifying a hue; it is about quantifying the visual language of an asset. This tool employs the Median Cut Quantization algorithm to partition the color space of an image into representative clusters, deriving a statistically dominant palette. Unlike simple histogram peaks, this method preserves the perceptual balance of the source image.
For professional designers and frontend engineers, precision is non-negotiable. Hex codes, RGB arrays, and CMYK print values are calculated in real-time. Furthermore, the integrated WCAG 2.1 Contrast Auditor ensures that selected foreground/background combinations meet the strict legibility standards required for modern web accessibility (AA/AAA compliance).
Formulas
The foundation of web accessibility lies in Relative Luminance (L), defined by the sRGB color space. The formula normalizes RGB values to a linear scale before applying weights that mirror human perception:
Once R, G, and B are linearized, Luminance is calculated:
L = 0.2126R + 0.7152G + 0.0722B
Finally, the Contrast Ratio (CR) between two colors L1 (lighter) and L2 (darker) is derived:
CR = L1 + 0.05L2 + 0.05
Reference Data
| WCAG Level | Requirement | Contrast Ratio | Context |
|---|---|---|---|
| FAIL | Below Minimum | < 3.0 | Decorative elements, disabled text. |
| AA (Large) | Mid-Range | ≥ 3.0 | Large text (18pt+ or 14pt bold). |
| AA (Normal) | Standard | ≥ 4.5 | Body text, navigation, buttons. |
| AAA (Large) | High Contrast | ≥ 4.5 | Large text for visually impaired. |
| AAA (Normal) | Enhanced | ≥ 7.0 | Long-form reading, critical UI. |