sitekits.dev
press ⌘K to switch tools
IMAGE

Image Color Extractor

Extract the dominant colors from an uploaded image as hex codes.

local
color-extract

🖥 Images are analyzed locally in your browser — never uploaded.

§01 ABOUT THIS TOOL

Overview

This tool builds a quick palette from any image. Choose a photo, screenshot, or logo, and it returns the ten most common colors as swatches with hex codes. Under the hood it downscales the image (max 100 px on the longest side), quantizes each RGB channel in steps of 32 to merge near-identical shades, skips mostly-transparent pixels, and ranks the resulting buckets by pixel count. Analysis happens on a canvas in your browser — the file never leaves your machine.

How to use

  1. Click Choose image and select any image file (PNG, JPEG, WebP, etc.).
  2. Read the resulting swatches — up to ten colors, ordered from most to least frequent, each labeled with its hex code.

Examples

  • Extract a brand palette from a competitor’s logo screenshot to compare against your design tokens.
  • Pull the dominant colors of a hero photo to derive matching accent and background colors.
  • Check whether a “solid” background PNG actually contains multiple near-identical shades left over from compression.

Notes

Extremely large images are handled fine because of downscaling, but the palette reflects the scaled image, so tiny color details (thin lines, single accent pixels) may not surface. Transparent regions do not influence the result.

FAQ
Is my image uploaded anywhere?
No. The image is drawn onto a hidden canvas and analyzed locally in your browser. It is never sent to a server.
How are the dominant colors calculated?
The image is downscaled to at most 100 pixels on its longest side, each pixel's RGB values are quantized into buckets of 32 per channel, and the ten most frequent buckets are shown. Pixels that are more than half transparent are ignored.
Why don't the extracted hex codes exactly match a color I picked from the image?
Quantization rounds each RGB channel to the nearest multiple of 32 so that similar shades group together. The result represents a color cluster, not one exact pixel, so it can differ slightly from any individual pixel value.