Tinker Tools

Color Palette Extractor from Images

Upload any image and extract its dominant colors using K-Means clustering. Export as CSS, SCSS, or Tailwind config. All processing is done locally in your browser.

Preview

Drop your image here or click to browse

Supports PNG, JPEG, WebP, GIF, BMP, SVG

How it works

1. Upload Image

Drag and drop or click to upload any image. Your file stays in your browser and is never sent to any server.

100% Private

2. Extract Colors

K-Means clustering analyzes every pixel to identify the dominant colors. Adjust the count from 3 to 8 to control palette detail.

K-Means Algorithm

3. Copy & Export

Click any swatch to copy its HEX code. Export the full palette as CSS variables, SCSS variables, or Tailwind config.

Multiple Formats

What Does This Color Palette Extractor Do?

This tool pulls the dominant colors out of an image you upload and hands them back as a palette you can paste into code. Upload a photograph, a screenshot, a poster, or a logo, and it analyses the actual pixels to find the colors that carry the most visual weight in that image. The result is a set of between three and eight swatches, ordered from most dominant to least, each shown with its HEX, RGB, and HSL values.

The extraction uses K-Means clustering, a standard algorithm for grouping data points into a fixed number of clusters. The image is first drawn to a canvas and downsampled so its longest side is at most 150 pixels, which keeps the analysis fast without meaningfully changing which colors dominate. Fully and mostly transparent pixels are discarded, then every remaining pixel is treated as a point in RGB space. Starting centroids are chosen with k-means++ seeding, pixels are repeatedly assigned to their nearest centroid, and each centroid is recomputed as the average of its members until the assignments stop changing or twenty iterations pass. The final centroids become your palette colors, and the number of pixels that landed in each cluster determines the ordering.

This is a palette extractor, not a color theory generator. It does not build complementary or triadic schemes from a base hue, generate tint and shade ramps, or evaluate contrast ratios. What it does is answer one question accurately: which colors is this image actually made of. All of it runs in your browser through the Canvas API, so the image is analysed locally and is never uploaded anywhere.

Key Features and Benefits

  • K-Means color extraction — Dominant colors are found by clustering the image's pixels rather than by sampling a grid of points or picking the most frequent exact values. That means a photograph of a sunset returns the oranges and blues a viewer perceives, not a scatter of near-identical values that happen to repeat.
  • Adjustable palette size — A slider sets the cluster count anywhere from three to eight, defaulting to six. Three gives you a bold, simplified reading of the image. Eight surfaces secondary and accent colors that a smaller palette would fold into its neighbours.
  • HEX, RGB, and HSL for every swatch — Each extracted color is displayed with all three notations at once, so you can take the HEX for CSS, the RGB for a canvas or design tool, and the HSL when you need to reason about hue and lightness relationships by hand.
  • One-click copy — Click any swatch, in the palette bar or the detail grid, to copy its HEX value straight to the clipboard. The swatch confirms the copy inline so you can work through several colors without losing your place.
  • CSS, SCSS, and Tailwind export — Switch the export format to emit the full palette as CSS custom properties on :root, as SCSS variables, or as a colors block for a tailwind.config.js theme extension. The generated code is shown in full and copies with a single button.
  • Transparency-aware, fully local — Pixels below roughly half opacity are skipped, so a logo on a transparent background yields the logo's colors instead of a muddy blend with nothing. The image is read into a canvas in your browser and discarded on reset, with no server involved at any stage.

How to Extract a Color Palette from an Image

  1. 1

    Upload an image

    Drag a file onto the upload area or click to browse. Any format your browser can render works, including PNG, JPEG, WebP, GIF, BMP, and SVG. Extraction starts automatically as soon as the image loads, so you see a first palette without pressing anything.

  2. 2

    Set the number of colors

    Move the slider between three and eight. Start at the default of six and adjust based on the image: a two-tone graphic rarely needs more than three or four clusters, while a busy photograph often has an interesting fifth or sixth color that only appears at a higher count.

  3. 3

    Re-extract to apply the change

    After moving the slider, press Re-extract Colors to run the clustering again at the new count. Because k-means++ seeding starts from randomly chosen pixels, re-running at the same count can shift results slightly. If a palette looks off, extracting a second time is a legitimate way to get a cleaner grouping.

  4. 4

    Review and copy individual colors

    The palette bar shows the colors in dominance order, and the grid below it gives HEX, RGB, and HSL for each. Click whichever swatch you need to copy its HEX value. Widths in the bar are uniform, so read the ordering rather than the size to judge which color dominates.

  5. 5

    Export the whole palette

    Choose CSS, SCSS, or Tailwind as the export format and copy the generated block. The CSS output defines --color-1 through --color-n on :root, SCSS produces matching $color-n variables, and the Tailwind output is a ready-to-paste colors object using palette-n keys. Rename the variables to something semantic once the code is in your project.

Expert Tips for Working with Extracted Palettes

An extracted palette is a starting point, not a finished design system. K-Means reports what is visually dominant in a photograph, and dominance is not the same as usefulness in an interface. A landscape shot will often hand you three closely related sky blues and a single dark green, which is a faithful description of the image but a poor basis for primary, secondary, and neutral roles. Take the two or three colors that genuinely carry the image's character, decide what each one is for, and derive the supporting neutrals yourself rather than forcing every extracted swatch into the UI.

Crop before you extract when you care about a specific region. Because the algorithm weights results by how many pixels fall into each cluster, a large flat background dominates the palette even when it is the least interesting part of the picture. If you want the colors of a product rather than the studio backdrop behind it, crop tightly to the product first. The same trick works in reverse: crop to a single area of a painting or a photograph to pull a palette from that region alone.

Verify contrast separately before you ship any of these colors as text or interface elements. This tool reports what is in the image and makes no claim about legibility, and colors sampled from photography routinely fail accessibility thresholds when placed against white or black. Run each pairing you intend to use through a dedicated contrast checker, and treat the extracted values as candidate hues to be tuned in lightness rather than as final tokens.

Related Tools

Color Converter

Translate extracted values into other color notations your tools expect

Gradient Generator

Blend two extracted colors into a CSS gradient for backgrounds and banners

Color Contrast Checker

Test whether an extracted color is legible against your text or background color

Pulling colors from a reference image is one of the fastest ways to ground a design in something real, whether that is a product photo, a piece of packaging, or a mood board. This extractor handles that first step accurately and privately in your browser. From there, the color converter moves values between the notations your design and code tools each prefer, the gradient generator turns a pair of swatches into usable CSS, and the contrast checker confirms that what looked good in a photograph is still readable in an interface.

Frequently Asked Questions

Recommended Tools

Image Resizer

Resize images instantly in your browser. Adjust width, height, and format with aspect ratio lock.

Image Compressor

Compress images with adjustable quality. Reduce file size while preserving visual quality.

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats with a live color preview.