You see a color in a screenshot — a perfectly saturated teal in a Stripe ad, a calming sage green in a SaaS landing page — and you want to use it in your own project. You know the color is somewhere in the image, but how do you actually get the #xxxxxx value out?

The answer is color palette extraction: a process that scans all the pixels in an image and returns the dominant colors. Designers have been doing this manually in Photoshop for years, but today there are faster, free, in-browser alternatives that work in 30 seconds without installing anything.

This guide compares 3 free methods, walks through the 30-second workflow with the recommended one, and shows you how to read the result so you can copy colors straight into your CSS, Figma file, or design tokens.

The 3 free methods at a glance

MethodSpeedAccuracyPrivacyCost
Photoshop / GIMP eyedropperSlow (manual, one color at a time)Pixel-perfect100% localFree (GIMP) / $25/mo (Photoshop)
Online extraction sitesFastGood⚠️ Image uploaded to serverFree with ads, paid for HD
In-browser tool (no upload)30 secondsGood for design use100% local, image never leaves browserFree

The third option — a fully in-browser extractor — is the sweet spot for 2026. You get near-Photoshop speed for design-grade palettes, your image never leaves your device, and there’s no signup, no ad popups, no 5-megapixel limit.

Why “dominant colors” beats “average color”

If you take a 1000×1000 photo and average all the pixels, you almost always get a muddy brown-grey that doesn’t appear anywhere in the actual image. Here’s a real example:

  • A photo of a yellow lemon on a white table: average RGB = (178, 165, 105) — a desaturated khaki that doesn’t exist in the photo
  • The dominant color of that same photo: #F4D03F — the actual lemon yellow you see with your eyes

Algorithms that report “the average color” are technically correct but visually meaningless. Real palette extraction works by bucketing similar pixels together and reporting which buckets have the most pixels. A photo with a lemon, a leaf, and a white background produces 3 dominant colors, not 1 muddy average.

Method 1: Photoshop / GIMP eyedropper (the old-school way)

This is what designers did from 2000 to ~2018. The workflow:

  1. Open the image in Photoshop or GIMP.
  2. Switch to the eyedropper tool (I in Photoshop).
  3. Click on a single pixel.
  4. Read the HEX value from the color picker.
  5. Repeat 5-6 times for the colors you actually want.

The catch: this gives you the color at the exact pixel you clicked, not the dominant colors of the image. If you want a representative palette, you need to know which pixels to click — usually the largest flat area of each color. Designers eyeball this, but it takes practice and the result varies by person.

When to still use this method: when you need pixel-perfect color sampling of a specific area, like getting the exact button color in a UI mockup, or matching a logo that has anti-aliased edges.

Method 2: Online palette extraction sites

Sites like Coolors.co, ColorThief, and Adobe Color all have “image to palette” features. Most work the same way:

  1. Upload your image.
  2. The site runs the extraction server-side.
  3. You get a palette with HEX values and a “download as ASE / GPL / CSS” button.

Pros: established tools, often include export formats designers want (Adobe Swatch Exchange, Sketch palettes, CSS variables).

Cons:

  • Privacy: your image is uploaded to a third-party server. For personal photos, that’s uncomfortable. For screenshots of unreleased products or client work, it may violate NDA.
  • Limits: most free tiers cap at 1-5 megapixels or require signup for HD.
  • Ads and popups: free tiers often push premium subscriptions aggressively.
  • No control over algorithm: you get 5 colors or 8 colors, not “I want exactly 6 colors at 32-bucket quantization”.

For personal projects, these sites work. For anything sensitive — or anything you’ll do more than twice — the friction adds up.

Method 3: In-browser tool (the 2026 default)

The fastest, most private, most repeatable workflow. Everything happens client-side in JavaScript on a <canvas>, so:

  • No image upload
  • No server processing
  • No file size limits beyond what your browser can render
  • Works offline once loaded

Here’s the 30-second workflow using Piick’s free Color Picker & Palette Extractor:

  1. Open the tool on the piick.cc/tools/color-palette-extractor page.
  2. Click the Palette from Image tab.
  3. Drag any image (JPG, PNG, WebP, GIF, up to 10MB) into the dropzone.
  4. Pick how many swatches you want (5, 6, or 8).
  5. Click Extract palette.
  6. Each swatch shows its HEX code and the percentage of the image it covers.
  7. Click any swatch to expand it — you’ll get HEX, RGB, HSL, and copy buttons for each format.

Total time: 30 seconds for a screenshot, 60 seconds for a hero photo.

How the algorithm works (the short version)

When you click Extract, the tool does four things:

  1. Downsamples your image to a 200×200 thumbnail (this is why it stays fast on large files).
  2. Buckets every pixel by rounding each color channel to the nearest multiple of 32 — so (255, 200, 150) and (248, 192, 144) end up in the same bucket.
  3. Counts how many pixels fall into each of the 512 possible buckets.
  4. Returns the top-K buckets by pixel count, sorted from most-dominant to least-dominant.

This is called bucket quantization (or color quantization). It’s not as smooth as k-means clustering, but it’s:

  • ~10x faster (no iteration, single pass over the pixels)
  • Deterministic — same image always gives the same palette
  • Easy to reason about — the buckets are visible in the histogram

For design-grade palettes (5-8 colors of a brand, a photo, a UI screenshot), bucket quantization is plenty good. K-means is for scientific applications like medical imaging.

Reading the result: what the percentages mean

When the tool says “Color 1: #3B82F6, share: 42%”, that doesn’t mean 42% of the image is exactly #3B82F6. It means 42% of the sampled pixels fell into the bucket that rounds to #3B82F6. The actual colors in that area of your image might range from #3580F0 to #4290FA — all rounded to the same swatch.

This is fine for design work. If you need the exact middle value of a region, you’d use a different tool.

Beyond extraction: the manual color picker

Same tool, Color Picker tab. Useful when:

  • You’re starting from a color (a brand color from your style guide) and want to see it in HEX, RGB, and HSL at the same time
  • You want to generate harmonies — complementary, analogous, triadic variations of a base color — without firing up Figma or a color theory book
  • You’re converting between formats: someone sent you rgb(59, 130, 246) and you need it as #3B82F6 for CSS

Five swatches of harmonies update live as you change the base color. Click any harmony to load it into the picker.

Three real-world scenarios

Scenario 1: Matching a competitor’s brand color

A SaaS landing page has a button color you want to borrow for your own redesign. Take a screenshot of the page, open the tool, drop the screenshot in. Extract 6 swatches. The button color will be one of them — usually the most saturated one. Click to expand, copy the HEX, paste into your CSS.

Tip: crop the screenshot to just the button first, so other UI elements don’t pollute the palette.

Scenario 2: Building a palette from a photo for a blog post

You shot a forest photo for a blog header and want to use its colors as the article’s accent palette. Extract 5 swatches from the photo. You’ll get 2-3 greens, a brown, maybe a sky-blue. Pick the 3 that have the best contrast against your background and use them as accent colors.

Tip: the share percentages help you decide which colors are “background” (high share) vs “accent” (low share). Don’t pick the top color as your accent — it’ll fight with your actual background.

Scenario 3: Verifying a designer’s deliverable

A freelance designer sent you a hero illustration with a brand palette. Drop the illustration in. Extract 6 swatches. Compare the resulting HEX values to the brand style guide. If #FF6B35 was supposed to be the primary orange and the extraction gives you #FF7039, you have a conversation to have — it’s a 2-bit difference per channel, but enough that designers notice.

Common pitfalls (and what to do)

  • The palette has too many similar colors. Your image is dominated by one tone (a sunset, a foggy morning). Solution: extract only 5 swatches, or pick from the lowest-share ones for accent contrast.
  • The palette has ugly muddy browns. There’s a lot of compression noise in the image. Solution: use a higher-quality source (PNG instead of JPG, or a higher-resolution JPG). Bucket quantization can’t tell signal from compression artifacts.
  • The dominant color is white or black. The image has lots of background (a screenshot, a logo on white). Solution: crop tighter before extracting, or use the manual picker to define the background and then sample the foreground.
  • You want more than 8 colors. Bucket quantization tops out around 8-10 useful swatches before adjacent buckets start fighting. For 20+ color palettes, you need a real design tool (Figma, Adobe Color).

When to skip extraction entirely

Sometimes the answer isn’t “extract from an image” — it’s “pick from a curated palette”:

  • Brand colors that already exist in a style guide — just copy the HEX directly
  • Material Design / Tailwind / Bootstrap — well-tested palettes already cover most use cases
  • Accessibility-driven palettes — when WCAG contrast is the constraint, you need ratio-based tools, not extraction

Bucket quantization is for “I see a color, I want the code for it”. For everything else, use a different tool.

Try it now

Open the Color Picker & Palette Extractor, drop in any image, and you’ll have a 6-color palette with HEX codes in 30 seconds. No upload, no signup, no limits beyond your browser’s memory.

Once you have your palette, paste it into a CSS variable block. A 6-color extraction off a Stripe-style screenshot might give you something like:

  • --color-1: #3b82f6; — primary brand blue
  • --color-2: #1e40af; — hover/active state
  • --color-3: #93c5fd; — light accent
  • --color-4: #fbbf24; — warning / highlight
  • --color-5: #f59e0b; — secondary accent
  • --color-6: #111827; — text / dark surface

Then in your stylesheet, reference them as var(--color-1) instead of the raw HEX. Ship it.