Color Palette Web Extractor
Extract dominant color schemes, brand palettes, and CSS hex codes from any image, screenshot, or stylesheet. Drag and drop any photo or paste raw CSS to extract tokens instantly.
1. Extract from Image or Screenshot
Drop a design mockup, photo, or press Ctrl+V / Cmd+V to paste from your clipboard.
2. Extract from CSS / HTML Code
Paste any stylesheet, Tailwind config, or HTML markup to detect all hex, rgb, and hsl declarations.
How In-Browser Color Extraction & Quantization Works
Unlike legacy web tools that upload heavy graphic files to remote servers, Pikka runs 100% in-browser client-side color quantization using HTML5 <canvas> and spatial pixel clustering.
When you drop an image or paste a screenshot, our engine:
- Downsamples the image: Constrains pixel processing within an optimized bounding box for instantaneous sub-30ms performance without sacrificing color fidelity.
- Filters noise & transparency: Strips fully transparent or semi-opaque alpha fragments to ensure only authentic design tokens are measured.
- Executes Euclidean Color Clustering: Groups similar RGB coordinates and calculates mathematical Euclidean distance ($d = \sqrt{\Delta R^2 + \Delta G^2 + \Delta B^2}$) to filter out near-duplicates while ranking dominant hues by frequency.
Extracting Colors from Webpage Stylesheets
When auditing competitor design systems or migrating an existing website, extracting color variables can be tedious. Pikka's regex parser automatically captures:
- Standard 3-character and 6-character hex values (
#FFF,#1E293B) - Modern 8-character hex values with alpha transparency (
#1E293B80) - Legacy
rgb()andrgba()functional notations - CSS custom properties and design token values
Need to convert transparent colors?
Use our dedicated two-way RGBA to 8-digit HEX converter to fine-tune opacity with live checkerboard previews.
Try RGBA to HEX Converter →