IMAGE TOOL

Color Palette Extractor

Extract beautiful dominant colors from any image. Get HEX, RGB, HSL codes instantly and export as CSS variables, JSON, or PNG — all in your browser, no upload.

✓ Free to use ✓ K-means clustering ✓ HEX / RGB / HSL ✓ Export CSS & JSON
// COLOR_PALETTE_EXTRACTOR

Extract Palette

LOCAL
◈

Drop image here

or click to browse — JPG, PNG, WebP, GIF, BMP, SVG

Max 25 MB • Processed locally, never uploaded
Tip: High-contrast photos give the most vibrant palettes

How to extract colors from an image

  1. Upload an image — drag & drop or click to browse. Any JPG, PNG, WebP, or GIF works.
  2. Choose number of colors — 3 for minimal, 5–6 for balanced, 8–10 for detailed palettes.
  3. Click Extract Palette — K-means clustering finds dominant colors in milliseconds.
  4. Copy & export — click any swatch to copy HEX, or export as CSS variables, JSON, or PNG strip.

Why this palette extractor?

Unlike server-side tools, everything runs locally via Canvas API and a lightweight K-means implementation. Your photos never leave your device — perfect for client work, unreleased designs, or private images. The algorithm downsamples intelligently for speed while preserving color accuracy, then sorts by dominance, luminance, or hue.

HEX#10B981
RGBrgb(16,185,129)
HSLhsl(160,84%,39%)

More Image Tools

Looking for another image utility? Explore related zenlyta tools:

Frequently Asked Questions

How does the color palette extractor work?

It reads your image pixels with the Canvas API, downsamples for performance, then runs K-means clustering to group similar colors and find the most dominant ones. All math happens in your browser — no upload, no server.

How many colors should I extract?

3 colors is great for minimal branding, 5–6 is the sweet spot for most designs (primary, secondary, accent, neutrals), and 8–10 captures subtle variations in photos. You can adjust anytime and re-extract instantly.

Can I copy HEX, RGB, or HSL?

Yes. Click any color swatch to copy its HEX code. Each card shows HEX, RGB, and HSL with dedicated copy buttons. Use “Copy All HEX” for quick pasting into Figma or CSS.

Is my image uploaded to a server?

Never. The image is loaded via FileReader and processed locally. Close the tab and it’s gone. This makes it safe for private client work and unreleased assets.

What export formats are supported?

Export as CSS variables (--color-1: #...), JSON array, Tailwind config, or download a horizontal PNG palette strip (1200×200) ready to share or import.