The Universal Image Color Analyzer & Palette Extraction Studio is an advanced, privacy-first, client-side digital utility engineered for UI/UX designers, frontend developers, graphic artists, and digital marketers on RiazHub.com. Powered entirely by in-browser HTML5 Canvas (2DContext) and modern JavaScript vector math, it extracts dominant color palettes from any raster or vector image (JPG, PNG, WEBP, AVIF, SVG, BMP, GIF) in sub-50 milliseconds without sending a single pixel over the network.

The tool features dual mathematical clustering engines k-Means Vector Clustering with k-Means++ seeding for true volume-weighted color masses and Median-Cut Quantization for high-contrast accent preservation—alongside automated extraction of five harmonized semantic tones: Dominant, Vibrant, Muted, Light, and Dark. It includes an interactive 9×9 pixel magnification loupe eyedropper with real-time micro-region point/kernel sampling (1×1, 3×3, 5×5), an automated WCAG 2.1 Relative Luminance Contrast Matrix testing AA and AAA text compliance across white and black backgrounds, and a comprehensive Color Space Inspector translating every swatch into HEX, sRGB, HSL, HSV/HSB, CMYK (Print), modern Oklab, cylindrical Oklch, CIELAB ($L^*a^b^$), and McCamy’s Color Temperature (Kelvin). Finally, it exports production-ready design tokens in CSS Custom Properties, Tailwind CSS configuration, SCSS maps, JSON design tokens, binary Adobe Swatch Exchange (.ASE) palettes, and downloadable 1200×900 Lossless PNG Palette Cards.

⚡ Color Science & Extraction Studio

Universal Image Color Analyzer & Palette Studio

Extract dominant color palettes with k-Means & Median-Cut clustering, inspect multi-space color values (HEX, RGB, HSL, HSV, CMYK, Oklab, CIELAB), verify WCAG 2.1 contrast ratios, and export design tokens with live pixel loupe sampling.

Dominant Tone

#3B82F6 • 35.4%

🌡️

Color Temperature

Neutral (~5,500K)

🎨

Palette Dynamic Range

8 Clustered Swatches

🔒

Processing Engine

⚡ 100% Client-Side Canvas

⚡ Quick Presets: 🏷️ Brand Identity (6 dom + 2 accent) 🎨 UI Tokens (50–900 Scale) ♿ WCAG Accessibility Audit 🔥 Vibrant Marketing Palette

🖼️

Drop image here or click to browse

Supports JPG, PNG, WEBP, AVIF, SVG, BMP & GIF (Up to 50MB)

📋 Paste (Ctrl+V) 🏔️ Load Sample Photo

1920 × 1080 px JPEG • 2.4 MB

Palette Size 8 Swatches

5 8 12 16

Extraction Algorithm k-Means Clustering (Accurate Centroids) Median-Cut (Balanced Bounding Box) Vibrant & Muted (Material Design Style)

Canvas Eyedropper 9×9 Loupe

🔍 Activate Canvas Eyedropper

Sample Radius Point Sample (1×1) Average 3×3 Area Average 5×5 Area

Hover over canvas

Ignore Pure White & Transparent

Ignore Deep Black (#000000)

⚡ Re-Analyze Colors 🗑️ Clear / Load New Photo

🎨 Dominant Palette 🔍 Interactive Loupe ♿ WCAG Accessibility 🔬 Color Space Matrix 💻 Code & Tokens

Dominant Palette Overview

📋 Copy All HEX 🖼️ Palette Card (PNG) 📁 Adobe Swatch (.ase) 💾 JSON Tokens

Harmonized Semantic Tones

#FFFFFF

🎯 Hover to magnify micro-regions in 9×9 pixel resolution. Click anywhere to sample and lock the color for full inspection.

WCAG 2.1 Relative Luminance compliance audit. Standard body text requires minimum 4.5:1 (AA) or 7:1 (AAA). Large headings (18pt+ / 14pt bold) require 3:1 (AA).

Color	HEX & RGB	On White (#FFF)	AA Normal	AA Large	On Black (#000)	AA Normal	Preview Sample

Selected Color Inspector

Click any swatch card or sample on the image to inspect all mathematical spaces.

HEX Code

#3B82F6

📋

RGB (sRGB)

rgb(59, 130, 246)

📋

HSL

hsl(217, 91%, 60%)

📋

HSV / HSB

hsv(217, 76%, 96%)

📋

CMYK (Print)

cmyk(76%, 47%, 0%, 4%)

📋

Modern Oklab

oklab(0.61 -0.04 -0.19)

📋

Modern Oklch

oklch(0.61 0.19 258)

📋

CIELAB (L*a*b*)

lab(56.2 9.8 -61.4)

📋

Relative Luminance (BT.709)

0.245

📋

Estimated Temperature

~6,200K (Cool)

📋

Generated 50–900 Lightness Scale (Click to Copy)

CSS Custom Properties Tailwind Config SCSS Map JSON Tokens SVG Palette

📋 Copy Code Snippet

// Code tokens will appear here...

🔬 How k-Means Clustering & Median-Cut Extract Dominant Colors ▼

An image is a dense matrix of millions of RGB coordinates in 3-dimensional Euclidean space $[0..255]^3$. k-Means Clustering partitions these points into $k$ distinct mathematical clusters by iteratively shifting centroids to minimize intra-cluster variance, accurately discovering the true volume-weighted color masses. Median-Cut Quantization recursively splits the color bounding box along its longest axis to preserve balanced contrast and unique accents.

📐 Modern Perceptually Uniform Spaces: Oklab, Oklch vs sRGB ▼

Standard sRGB and HSL are not perceptually uniform: blue and yellow of the same numerical lightness look radically different to human vision. Oklab and cylindrical Oklch (Lightness, Chroma, Hue) correct for non-linear human chromatic perception, ensuring that hue shifts and gradients transition smoothly without muddy intermediate hues or brightness spikes.

♿ WCAG 2.1 Relative Luminance & Typography Contrast Standards ▼

The World Wide Web Consortium (W3C) defines relative luminance using ITU-R BT.709 coefficients: $L = 0.2126R + 0.7152G + 0.0722B$ (after inverse gamma linear companding). Contrast ratio is calculated as $(L_1 + 0.05) / (L_2 + 0.05)$. Level AA requires 4.5:1 for normal text and 3.0:1 for large text; strict Level AAA requires 7.0:1.

🔒 Privacy Guarantee: 100% In-Browser Client-Side Processing ▼

Your digital assets, brand identities, photos, and screenshots are processed strictly in your local web browser using the HTML5 Canvas 2DContext API. Zero image bytes, telemetry, or color metrics are ever transmitted to any remote server or cloud infrastructure.

✓ Copied to clipboard!