About this tool

Upload any image to extract its dominant color palette. Get ready-to-use color values in HEX, RGB, and HSL, plus code snippets for CSS and Tailwind.

Image Color Palette Extractor finds the dominant colors in a photo, screenshot, or illustration and returns them as values you can paste into a stylesheet. It scales the image to a 240-pixel long edge, builds a histogram of the visible pixels, splits it with a median-cut pass into the number of colors you ask for, merges near-duplicates, and ranks what remains by how much of the sampled area each cluster covers. Each color appears as a swatch with its share percentage and copy buttons for HEX, RGB, and HSL. A code panel switches between CSS custom properties, a Tailwind theme extension, and a JSON report, and a labeled palette strip can be downloaded as PNG. Sources up to 25 MB, 60 megapixels, and 16,384 pixels per side are accepted.

Builds a weighted 5-bit RGB histogram from visible sampled pixels, then applies median-cut buckets and near-duplicate merging.
Ranks each distinct cluster by sampled coverage and exposes HEX, RGB, HSL, CSS, Tailwind, and JSON values.
Checks image signatures and source limits before sampling and ignores pixels below 6% opacity.
Exports a verified labeled PNG strip and a source-linked JSON report.

How to use Color Palette

Drop a PNG, JPEG, WebP, GIF, or AVIF file onto Choose an image. The Source preview panel shows how many pixels were sampled and the opacity-weighted coverage, which drops below 100 percent for images with transparent regions. Under Extracted colors, use the Palette size control to request 3, 5, 8, or 10 colors; you may get fewer if the image lacks that many distinct clusters. Click a swatch in the proportional bar to copy its HEX value, or use the hex, rgb, and hsl rows under each color card. In Code and report, switch between CSS, Tailwind, and JSON and press Copy. Palette PNG downloads a strip with each color, its HEX, and its sampled share; JSON saves the same data with source file details.

When this tool is useful

A front-end developer bootstrapping CSS variables from a client's existing hero image before the brand guide arrives.
A designer checking whether a stock photo's dominant tones clash with the accent color of a landing page.
A marketer picking a background color for social cards that echoes the product shot without eyedropping by hand.
A data-visualization author extracting a small, image-derived palette for a themed chart or infographic.
A theme author generating a Tailwind color scale seed from a screenshot of an app they want to match.

Practical tips

Coverage percentages come from a 240-pixel downscale, so treat them as rough proportions rather than exact pixel counts from the original file.
Large flat backgrounds dominate the ranking. Crop to the subject first if you want the product or illustration colors near the top of the list.
Pixels below 6 percent opacity are ignored and the rest are weighted by alpha, so a transparent PNG logo yields its real colors, not the checkerboard.
Dominant does not mean usable for text. Run any extracted color through a contrast checker before using it for type on a light or dark surface.
Requesting 10 colors on a simple two-tone graphic returns fewer clusters after merging; that is the tool refusing to invent shades that are not there.

Examples you can test

Load an example, compare the result with the expected output, then replace it with your own input.

Seed CSS variables from a product photo

Example input

product-hero.jpg, Palette size 5, CSS view

Expected output

:root {
  --palette-1: #1f2a44;
  --palette-2: #e8d9c5;
  --palette-3: #c0392b;
  --palette-4: #7f8c8d;
  --palette-5: #f4f4f2;
}

Values are ordered by sampled coverage, so palette-1 is usually the background or largest surface and later entries are accents.

Palette strip for a mood board

Example input

poster.png with transparency, Palette size 8, Palette PNG download

Expected output

A PNG strip with eight labeled swatches showing HEX and percent sampled

The strip is checked for a valid PNG signature and expected dimensions before the download starts, so a failed export shows an error instead of a blank file.

Validation checklist

Check the opacity-weighted coverage figure when working with transparent images.
Compare the top-ranked color with what your eye sees as the background to sanity-check the sampling.
Run text-and-background pairs through a contrast checker before shipping them.
Compare extracted values against existing brand tokens before adding new ones.
Keep the JSON report if you need to trace which source file produced the palette.

Image Color Palette Extractor