🖼 Image & Media

Image Color Palette Extractor

Pick an image and pull out its main colors as a palette. Copy each color's HEX or RGB, and see how much of the image each one covers. Everything runs in your browser — the image is never sent to a server.

Examples (click to try)
Pick an image and the main colors appear right away. The image is processed only in your browser and never leaves your device.

How to Use the Image Color Palette Extractor

New here? Start by pressing 🖼 Try a sample image. A bundled image loads and its main colors appear right away, so you can see how it works. Then pick your own image. Each color shows its HEX, RGB, and coverage, and a single click copies the code. Everything is processed in your browser, so the image never leaves your device.

  1. Choose an image to extract colors from. A preview and the results appear.
  2. Pick the number of colors (4 to 10, default 6). Changing it rebuilds the palette — for example, choose 4 when you only want the lead colors for a logo, or 10 to see a wider range of options.
  3. Click a swatch or press Copy HEX to copy that color's HEX code (e.g. #4a90d9).
  4. Want the whole set? Press Copy all HEX to grab every color's HEX at once, one per line.

Example: building a website palette from a photo

Load a landscape photo of a blue sky over green hills, for instance, and the dominant color comes first — the sky blue #4a90d9 — followed by the hill green #7cb342 and the sun's yellow #f2c94c, each with its coverage. Click the swatch you like to copy #4a90d9, then paste it straight into CSS as background: #4a90d9; or into a design tool's color picker to recreate the photo's mood instantly. Change the number of colors to pull just the single main color, or widen the set to scout accent candidates.

Tips for power users

  • Copy each color's HEX individually: the swatch itself is a copy button. One click puts its HEX on the clipboard, ready to paste into CSS or a design tool.
  • Copy all HEX: grab every color's HEX at once, one per line, to drop into token definitions or a palette table.
  • Set the number of colors: switch between 4 and 10 to re-extract instantly — compare a coarse lead-colors-only view against a finer set of candidates in seconds.

Handy For

  • Matching a website or slide deck to the mood of a photo or logo
  • Deriving a palette from a brand color or key visual
  • Noting down the colors used in an illustration or artwork as HEX/RGB
  • Finding the dominant color of an image you like in one glance

Frequently Asked Questions

Is the image I select sent to a server?
No. Loading the image and extracting its colors happen entirely in your browser. The image is never transmitted to or stored on any external server. You can use this tool with complete confidence.
How are the colors extracted?
The image is scaled down to about 200px on its longest side, then every pixel is read and similar colors are grouped and counted using quantization to pick the representative colors. The dominant color (the one covering the largest area) comes first, and each color shows the share of the image it covers. Transparent pixels are ignored.
How do I use the color codes?
Each swatch shows both HEX (#RRGGBB) and RGB (rgb(r, g, b)). Click a swatch or press its Copy HEX button to copy the HEX code to your clipboard, ready to paste into a design tool or CSS. You can extract anywhere from 4 to 10 colors.