Skip to content
Colour Lab

Palette Extractor

Color palette from image: extract dominant, vibrant, muted, warm or cool colours from any photo, with hex codes to copy.

  • #color palette from image
  • #extract colors from image
  • #image to color palette
  • #palette
  • #extract
  • #dominant colours
  • #image
  • #swatches
100% client-side

Runs in your browser. Your data never leaves this device.

The Workbench
Palette Extractor — workspaceLive

Drop an image here

or click to select a file, or paste

Network requests0
Bytes uploaded0
Trackers fired0
The Guide

About Palette Extractor

/01 Pulling the dominant colours out of an image

Load a photograph or artwork and get its dominant colours back as a palette with hex codes ready to copy. A fast way to build a colour scheme that matches a photograph, a brand asset or a piece of reference art.

The extraction groups similar colours together so you get a handful of representative shades rather than hundreds of near-identical ones.

/02 What the extracted palette is and is not

Extraction finds the colours that occupy the most area, which is not always the colours that define the image. A photograph dominated by sky and pavement will return blues and greys even when the subject is a red door — the accent that makes the image memorable may cover very little of it.

Treat the result as a starting point: keep the shades that carry the mood, and check any pair you plan to use for text against contrast requirements before building an interface on them.

/03 Creating a color palette from image colours

Photographs are one of the best sources of colour schemes, because real scenes already contain colours that work together. Drop in a photo, artwork or screenshot and this tool pulls out a color palette from the image, with each swatch's hex code ready to copy.

It uses k-means clustering: every pixel is grouped with others of a similar colour, and the centre of each group becomes a palette colour. That captures the colours the image is actually made of, rather than a random handful of pixels. Choose more or fewer colours, and re-run with new seeds to see alternative groupings from the same image.

Palette styles steer what gets picked. Dominant finds the colours that cover the most area. Vibrant and muted favour bold or subdued tones, light and dark favour the ends of the brightness range, and warm and cool favour reds and oranges or blues and greens.

/04 From extracted palette to finished design

An extracted palette is raw material, not a finished scheme. The largest colours in a photo are often skies, walls or shadows, which make good backgrounds but poor accents, so switch to the vibrant style when you need something for buttons and highlights.

Once you have a colour you like, send it to the Tailwind shade generator to build a full 50 to 950 scale around it, then check any text and background pair with the contrast checker. Photos with strong colour casts from lighting can skew every swatch, so pick images with natural colour when accuracy matters.

FAQ

Questions about Palette Extractor.

How many colours should I extract?
Five or six is usually enough for a working scheme. More produces near-duplicates that are hard to tell apart in use.
Why is the colour I wanted missing?
Extraction favours colours covering the most area. A small but striking accent can be statistically insignificant — use a pixel picker to grab it directly.
Does it work on any image?
Any image your browser can open. Photographs, illustrations and screenshots all work, and everything is processed locally.
How do I get a color palette from a picture?
Drop the picture in, choose how many colours you want and a style such as dominant or vibrant, and the palette appears with hex codes to copy. Re-extract to see a different grouping from the same image.
What is the difference between this and a color picker?
A color picker gives you the exact colour of one pixel you click. This analyses the entire image and returns its main colours as a palette, which is better for building a scheme.
How many colours should a palette from an image have?
Five or six is usually right for a design scheme. Fewer captures the overall mood, while more starts to include small details and noise that are hard to use.
Related
Colour Converter

Convert hex to RGB, and between HSL, OKLCH, LAB, LCH and OKLAB, with a colour picker and every format shown at once.

hex to rgbrgb to hexcolor code converter
Contrast Checker

WCAG contrast checker: test any text and background colour pair against WCAG 2.1 AA and AAA ratios, with a live preview.

contrast checkerwcag contrastcolor contrast checker
Harmony Generator

Color harmony generator: build complementary, triadic, analogous, split-complementary, tetradic and monochromatic schemes from one colour.

color harmonycomplementary colorscolor wheel generator
Tailwind Shade Generator

Tailwind color palette generator: turn one colour into a full 50 to 950 shade scale, as a Tailwind config or CSS variables in hex or OKLCH.

tailwind color palettetailwind color generatortailwind shades
Gradient Generator

CSS gradient generator for linear, four-corner and mesh gradients with optional grain. Copy the CSS or export a PNG background.

gradient generatorcss gradientbackground gradient generator
Pixel Picker

Color picker from image: upload a photo or screenshot and sample the exact hex colour of any pixel with a magnified zoom loupe.

color picker from imagehex color from imageimage color picker
Palette Generator

Color combination generator: create colour palettes from a seed colour with multiple strategies, lock colours you like, and export them.

color combination generatorcolor palette generatorcolor scheme generator
Palette Collection

Browse 284 curated color palettes across artistic, nature, vintage, modern, soft, bold, seasonal and monochrome styles, and copy any colour.

color palettescolor palette ideashex color palettes
Colour Blindness Simulator

Color blindness simulator: preview an image or colour as people with protanopia, deuteranopia, tritanopia and five other colour vision types see it.

color blindness simulatorcolor blind simulatorred green color blindness