DEV Community

Sarfaraz
Sarfaraz

Posted on Originally published at samtoolkit.com

I Built a Free Color Palette Extractor That Never Uploads Your Images

#css #webdev #opensource #design

Ever needed to pull a color scheme out of a photo, a screenshot, or a client's logo — and hesitated for a second because you didn't want to upload it to some random website?

That hesitation is exactly why I built the Color Palette Extractor on SamToolkit, a free, privacy-first developer tools site. Every tool on SamToolkit runs entirely in your browser using Blazor WebAssembly — nothing you upload ever touches a server.

What it does

Drop in any image — a photo, a mockup, a brand logo — and the tool analyzes the pixel data locally and returns a ready-to-use palette:

  • Dominant colors, ranked by prevalence
  • Hex, RGB, and HSL values for every extracted color, one click to copy
  • A quick preview swatch strip so you can eyeball the palette before using it
  • Works with PNG, JPG, and WebP

It's built for the moment you're staring at a reference image thinking "I just need these five colors as hex codes" — no account, no upload limit, no image leaving your machine.

Why client-side matters here

Color extraction is a genuinely good fit for running entirely in-browser:

  1. Privacy — brand assets, unreleased designs, or client photos never leave your device.
  2. Speed — no round trip to a server means the palette appears almost instantly after you drop the file.
  3. No limits — since there's no backend processing cost, there's no arbitrary cap on how many images you can run through it.

Under the hood, the tool decodes the image into a pixel buffer, buckets similar colors together (so you get a clean palette instead of 40 near-identical shades of blue), and sorts by frequency — all inside WebAssembly, at native-ish speed.

A quick example

Say you're building a landing page and the client sent over a product photo with a color scheme you want to match. Instead of eyeballing hex codes in a screenshot tool:

  1. Open the Color Palette Extractor
  2. Drag the image in
  3. Copy the hex codes straight into your CSS: 
:root {
  --color-primary: #2f6f4f;
  --color-secondary: #e8b04b;
  --color-accent: #c1443c;
  --color-neutral: #f4f1ea;
}
Enter fullscreen mode Exit fullscreen mode

Done — no design software required.

Part of a bigger toolkit

The Color Palette Extractor is one of about 30 browser-based utilities on SamToolkit — JSON formatters, image converters, text diff tools, and more, all following the same rule: nothing leaves your browser.

If you try it out, I'd love to hear what you think — and if there's a color or design tool you wish existed, drop it in the comments.

🔗 Try the Color Palette Extractor

Top comments (0)