CYBERTOOLS / 0x3E
[SYS_NODE: 0x3E // CHROMA EXTRACTOR & PIXEL PALETTE SAMPLER]

CHROMA EXTRACTOR // PIXEL PALETTE HUD

In-memory image color quantization and pixel matrix sampler. Decompose raster bitmaps into dominant 6-color chroma palettes, inspect pixel coordinates via HTML5 Canvas, and export production CSS variables with zero server transmission.

DRAG & DROP RASTER IMAGE (PNG, JPG, WEBP, SVG)
Processed locally in browser RAM via Canvas 2D context. Zero remote upload.
DOMINANT CHROMA PALETTE (TOP 6 QUANTIZED)
Click any card to copy HEX
CANVAS PIXEL INSPECTOR
Click image to sample pixel
TARGETED PIXEL SPEC
Coord: (0, 0)
#00F5FF
HEX: #00f5ff
RGB: rgb(0, 245, 255)
LUMINANCE: 80.2%

COLOR QUANTIZATION ALGORITHMS, LUMINANCE FORMULAS & PIXEL FORENSICS

Technical specifications for Canvas 2D pixel extraction, Median Cut color reduction, and WCAG 2.1 relative luminance math.

1. Color Quantization via Canvas API

Raster images contain upwards of millions of discrete RGB pixel coordinates. To synthesize a cohesive 6-color palette, our engine draws bitmap payloads onto an in-memory downsampled 100×100 canvas. Accessing raw RGBA octets via ctx.getImageData(0, 0, w, h).data enables spatial color binning across three-dimensional Euclidean RGB distance:

// Euclidean Color Distance: ΔE = √[ (R&sub1; - R&sub2;)² + (G&sub1; - G&sub2;)² + (B&sub1; - B&sub2;)² ]

2. WCAG Relative Luminance Standards

Per W3C Web Content Accessibility Guidelines (WCAG 2.1), relative luminance measures normalized photometric brightness:

Y = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin
1. Airgapped Safety 100% in-browser Canvas execution. Private photos, proprietary UI mockups, and client graphics are never transmitted remotely.
2. Interactive Eyedropper Click anywhere on the source canvas to pinpoint exact single-pixel hex values and optical luminance coordinates.
3. Direct CSS Variables Export Instantly outputs ready-to-paste CSS custom properties (--color-primary) for immediate UI theming.