🎨
Social Asset Generator
Create perfectly-sized images for every social media platform in seconds
FreeBrowser-basedNo Signup
🎨
🌐 Runs in Browser⏱ Est. 1–3 seconds
Color Palette Extractor
Extract dominant color palettes from any image instantly
Try It Now — FreeWhat is Color Palette Extractor?
Upload an image and extract its dominant color palette using k-means clustering. Get HEX, RGB, HSL, and CMYK codes. Export palettes to CSS, JSON, Adobe ASE, or Figma tokens.
Key Features
Extract 2–16 dominant colors using k-means clustering
Get HEX, RGB, HSL, and CMYK values for each color
Color proportion visualization
Export to CSS custom properties, JSON, Sass variables
Adobe ASE (swatch) file export
Figma design token JSON export
Accessibility check: WCAG contrast ratios between extracted colors
Drag-and-drop or URL input
How It Works
1
Upload Image
Drop an image or enter a public image URL. Supports JPEG, PNG, WebP, GIF.
2
Clustering
K-means runs on down-sampled pixel data to identify dominant color clusters.
3
Review Palette
See swatches with exact color codes. Adjust the number of colors (2–16).
4
Export
Copy codes or export the palette in your preferred format.
Who Is This For?
- →Designers extracting brand palettes from logo images
- →Developers creating color themes from reference images
- →Artists analyzing color schemes in reference artwork
- →Marketers ensuring brand color consistency
Why Use Color Palette Extractor?
Adobe Color and Coolors are the go-to palette tools, but they require uploading your image to extract colours — a concern for unreleased product shots or client branding assets. Zeraku's Color Palette Extractor runs the entire k-means clustering algorithm in your browser. Your images stay local. Export to CSS variables, JSON, or Adobe Swatch Exchange (.ase) formats for direct use in your design workflow.
Extract Colours Without Uploading Your Designs
Adobe Color and Coolors require uploading your image to extract colours — a risk for unreleased product shots or client work. Zeraku runs k-means clustering entirely in your browser.
| Zeraku | Adobe Color | Coolors | |
|---|---|---|---|
| Privacy (no image upload) | ✓Browser-only | ✗Server upload | ✗Server upload |
| Export CSS variables | ✓Free | ✗ | ✓Paid plan only |
| Export Adobe Swatch (.ase) | ✓Free | ✓Adobe CC required | ✓Paid plan only |
| Adjustable colour count | ✓2–16 colours | ✗Fixed | △Up to 10 |
| Account required | ✗Not required | ✓Adobe ID required | △Some features required |
Beginner's Guide
Color Palette Extractor automatically identifies the most prominent colours in any image and turns them into a palette you can use in design work. Upload a photo, a brand screenshot, or any image, and the tool returns the dominant colours as hex codes, RGB values, and HSL values. You can choose how many colours to extract (2–16), sort them by hue or brightness, and export the palette as CSS variables ready to paste into your stylesheet.
Technical Details
Pixel sampling uses an off-screen canvas to decode the image and extract a representative subset (up to 10,000 pixels, sampled with a stride proportional to image area). The k-means++ algorithm runs in a Web Worker for up to 100 iterations or until centroid movement falls below a 0.1-pixel-distance threshold. Colour space conversions between sRGB, HSL, HSV, and CIE LAB use standard IEC 61966-2-1 and D65 illuminant formulas. The "Sort by" options reorder swatches by luminance (L* from LAB), saturation (S from HSL), or hue (H from HSL). Exported PNG swatches are generated via canvas.toDataURL(); CSS/JSON/ASE outputs are built as text Blobs and offered via object URL download.
Frequently Asked Questions
Related Tools
Ready to try Color Palette Extractor?
Open Color Palette Extractor — Free