About

This tool goes beyond simple color picking by performing deep algorithmic analysis of your image content. Unlike basic tools that simply grab frequent pixels, the Spectrum Analyzer utilizes K-Means Clustering in the CIELAB color space to identify perceptually distinct dominant themes. This prevents the extraction of nearly identical duplicates (e.g., five shades of blue) and ensures a balanced, harmonious palette representation.

We solve the specific problem of Perceptual Uniformity. A Euclidean distance check in RGB space often mistakes widely different human-perceived colors as similar. By converting pixel data to L*a*b* coordinates before clustering, this tool mirrors human visual processing. Furthermore, our engine includes a density-based downsampling algorithm to process high-resolution images (4K+) instantly without freezing your browser, alongside sophisticated handling of alpha channels to ignore transparency.

Formulas

The core distance metric used for clustering is the CIE76 color difference formula (ΔE^*_ab). Unlike Euclidean RGB distance, this metric approximates human vision differences:

√(L₂ - L₁)² + (a₂ - a₁)² + (b₂ - b₁)²

Where:

Lightness (0 = Black, 100 = White)

Green - Red Axis

Blue - Yellow Axis

The Luminosity Histogram calculation transforms every pixel using the Rec. 709 coefficient standard:

Y = 0.2126 R + 0.7152 G + 0.0722 B

Reference Data

Standard Name	HEX	RGB	HSL	Description
Cobalt Blue	#0047AB	0, 71, 171	215°, 100%, 34%	Intense, deep blue pigment historically used in ceramics and glass. High usage in corporate tech identity.
Coral	#FF7F50	255, 127, 80	16°, 100%, 66%	Vivid reddish-orange, essential for call-to-action buttons due to high contrasting visibility against white.
Turquoise	#40E0D0	64, 224, 208	174°, 72%, 56%	Cyan-green mineral color. Often used in refreshing, modern UI designs.
Crimson	#DC143C	220, 20, 60	348°, 83%, 47%	Strong, bright, deep red color inclining toward purple. Standard for "Error" or "Danger" states in UI.
Gold	#FFD700	255, 215, 0	51°, 100%, 50%	Metallic yellow. Used for premium tiers, ratings (stars), and high-value accents.
Olive	#808000	128, 128, 0	60°, 100%, 25%	Dark yellowish-green. Common in military or outdoor-themed design palettes.
Lavender	#E6E6FA	230, 230, 250	240°, 67%, 94%	Light purple. Excellent for non-intrusive backgrounds in clean interfaces.
Slate Gray	#708090	112, 128, 144	210°, 13%, 50%	Blue-gray. Standard text color for softer readability than pure black.
Magenta	#FF00FF	255, 0, 255	300°, 100%, 50%	Primary CMYK color. Used for high-energy, digital-native brands and accents.

Frequently Asked Questions

Screen rendering relies on the sRGB profile. When we analyze the raw image data, we use the specific values stored in the file. Some browsers also apply color management to images, shifting the visual representation slightly compared to the raw numerical data we process. We prioritize the raw hex codes found in the file structure.

K-Means algorithms naturally gravitate toward the largest clusters. In many photos, backgrounds (walls, sky, shadows) dominate 80% of pixels. Vibrancy Mode filters out low-saturation pixels (Sat < 10%) before processing, forcing the algorithm to find "accent" colors that give the image its character, rather than just returning 5 shades of gray.

Yes. The analyzer automatically detects the Alpha channel. Any pixel with transparency > 0% is weighted lower or excluded completely to prevent "dirty" colors (mixed with the canvas background) from polluting your palette.

No. All processing happens 100% inside your browser using HTML5 Canvas and Web Workers. The image data never leaves your device, ensuring maximum privacy and zero latency.