Color Palette from Image
🖼️

Color Palette Extractor from Image

Extract colors from any image or PDF

How to Use

  1. 1

    Upload an image (PNG, JPG, WebP) or a PDF file by clicking the upload area or dragging it in.

  2. 2

    The dominant colors are extracted automatically using k-means clustering and shown as a palette.

  3. 3

    Click any color swatch or value to copy it. Adjust the number of colors (4-12) using the count buttons. Use "Copy all HEX codes" to export the full palette.

Frequently Asked Questions

How does color extraction work? ▼
The tool samples pixels from your image and applies k-means clustering, a machine learning algorithm that groups similar colors together iteratively until stable clusters form. Each cluster's average color becomes one swatch in your palette. The result is the set of colors that best represent the visual content of your image - not just the most frequent pixels, but the most perceptually distinct and representative hues. This produces much more useful palettes than a simple pixel frequency count would.
How many colors can I extract? ▼
You can extract between 4 and 12 dominant colors. Fewer colors (4-6) gives you the essential, most prominent hues - useful for identifying a brand's core colors or a photograph's dominant mood. More colors (8-12) reveals more of the subtle palette with secondary and accent colors included. You can switch between different counts after uploading without needing to re-upload the file - results update instantly.
Does this work with PDFs? ▼
Yes. When you upload a PDF, the first page is rendered at full resolution in the browser using PDF.js, and then color extraction runs on that rendered image. This is particularly useful for extracting brand colors from a company's PDF brochure, presentation slide, or marketing document when you want to match their visual style.
Is my file uploaded to a server? ▼
No. The entire color extraction process runs locally in your browser. Images are loaded onto an HTML Canvas element and processed using JavaScript. PDFs are rendered using PDF.js, also entirely client-side. Your files - whether they are personal photos, confidential business documents, or brand assets - never leave your device and are never transmitted to any server.
Can I use the extracted colors in my designs? ▼
Yes. Click any color swatch to copy its value in HEX, or toggle to copy as RGB or HSL format instead. All three formats are supported because different tools have different preferences - CSS uses HEX or RGB, Figma accepts all three, and some design software prefers HSL. Use the "Copy all HEX codes" button to export the complete palette as a comma-separated list for quick import into design tools.

More Design Tools

⬛
Border Radius Generator
Generate CSS border-radius visually
 🌑
Box Shadow Generator
Generate CSS box-shadow visually
 🎨
Color Blindness Simulator
Simulate how designs look to color-blind users
 👁️
Color Contrast Checker
Check WCAG color contrast ratios

About this Tool

Extracting colors from an image is one of the most practical tasks in design and branding work. When you need to match the color palette of an existing logo, photograph, or brand asset, manually eyedropping colors is tedious and imprecise. This tool automates the process using k-means clustering, a mathematical algorithm that identifies the most visually significant and distinct colors in any image. Upload a product photo to extract its color story for your e-commerce listing, analyze a competitor's branding from their PDF, match accent colors to a hero image on your website, or build a cohesive design system from a reference image. Results appear instantly with HEX, RGB, and HSL values ready to copy.