Lite Tools

Image Color Extractor

Upload an image to pull out its main palette, or click any pixel to read the exact color under it.

Drop an image here, or click to choose a file JPG, PNG, WebP, GIF and other common formats

How to use

  1. Click the dashed box to choose an image, or drag a file straight onto it.
  2. The page extracts up to eight dominant colors and sorts them by share.
  3. Click a swatch to copy its HEX value, or press Copy all colors to get the set line by line.
  4. Click anywhere on the image to read the exact color of that pixel and its RGB values.
  5. The image is decoded on this page only. A refresh clears it.

FAQ

Is my image uploaded?
No. The file is read through the browser File API and decoded on a local canvas. No network request is made, and closing the page releases the data.
Why do the extracted colors differ from the original?
The palette uses median cut, which groups colors into buckets and averages each one. It summarizes the look of the image rather than reproducing every pixel. For an exact value, click the image at that point.
How many colors are returned?
At most eight. Similar buckets merge when the image has few distinct colors, so the count can be lower. Pixels that are mostly transparent are ignored, which keeps empty backgrounds out of the palette.
Which formats work?
Anything the browser can decode: JPG, PNG, WebP, GIF, AVIF and SVG are the common ones. Very large images are downscaled before sampling, so extraction stays fast regardless of resolution.

How to use

  1. Choose or drop an image

    Click the dashed box or drag a file onto it. Any format the browser can decode works, and the file never leaves your machine.

  2. Read the palette

    Up to eight dominant colors appear, sorted by share, with the HEX value and percentage under each swatch.

  3. Click a swatch to copy

    A click copies that HEX value. Copy all colors grabs the whole set at once.

  4. Click the image for one pixel

    To sample a detail, click that spot on the image. The result box shows the exact HEX, RGB and alpha.

  5. Use the values

    Paste them into a design tool, CSS variables or a theme file. Pair with a palette generator when you need a full scheme.

About this tool

Posters, slides and web pages often need a palette pulled from a photo or a screenshot. Guessing by eye drifts, and an eyedropper only reads one point, which fails on gradients and busy scenes. A dominant palette answers a different question: what does this image look like as a whole, and which few colors cover most of its area. Extracting that gives a reusable starting point for any design. Sampling is an approximation, not a measurement.

The page draws the image onto a canvas scaled to 360 pixels on the long edge, skips translucent pixels, and groups the rest with median cut. Each bucket contributes its average color, weighted by how many pixels it holds. Pixel picking takes another route: a full-size canvas reads a single pixel, so the value is exact. Decoding and math all happen locally. Treat the result as a starting point that still needs a design pass.

How it works

Median cut treats colors as points in a three-dimensional space. It finds the channel with the widest spread, splits the points at that channel's median, and repeats until the target bucket count is reached. That resists noise better than raw counting and runs faster than k-means, at the cost of depending on split order. A large sky becomes its own bucket while a small saturated accent may be merged away, so the palette reflects area rather than visual importance.

The output still needs a human pass. JPEG compression leaves colored fringes around edges, so one wall may read as three or four similar HEX values. Displays differ in color profile, and the same file can look different on two screens. Before using a pair for text and background, run a contrast check. Looking fine on your monitor is not the same as being readable for everyone. Check both modes before publishing.

When to use it

  1. A slide deck palette

    A landscape photo anchors the title slide and the template needs to match. Extract the palette, pick a dark tone for the title band and a light tone for body slides, then choose an accent from the remaining colors. The deck looks consistent without a designer.

  2. Brand colors from a screenshot

    Only a product screenshot is available, with no style guide. Extract the palette and compare it with the buttons and navigation. The primary and secondary colors come back quickly, which saves a long round of manual sampling during a competitor review.

  3. Themed pages from cover art

    A personal blog wants its accent to follow each cover image. Extract the palette, store a light and a dark tone as CSS variables, and switch them with the cover. One variable block changes the whole theme, and the maintenance cost stays low.

Tips & tricks

  • Flat areas in screenshots are the most reliable source. Photos shift with lighting and compression, so one object can read as several close colors.
  • Sort the result by lightness: dark tones for backgrounds, light tones for cards, mid tones for accents.
  • When brand accuracy matters, trust the design spec. Treat extracted colors as inspiration, not as the source of truth.

Things to watch

  • Using extracted colors as brand colors

    Compression and color grading shift the values, so an extracted HEX rarely matches the official one. Keep the design spec as the source and use extraction for reference. Writing a sampled color into a brand guide causes drift over time.

  • Skipping the contrast check

    Colors that look good side by side can fail as text on a background. Run a contrast check before shipping, and aim for at least 4.5:1 on body text. Light gray on white is the classic failure. A pretty palette that nobody can read is a bug, so fix the pair before the layout.

  • Forgetting transparency

    Transparent areas of a PNG are skipped, so the palette only reflects visible pixels. An image that is mostly transparent returns fewer colors. That is expected behavior, not a broken result. If you need a full palette, flatten the image onto a solid color first.

Related Tools