Colour Palette from Image

Colour Palette from Image finds the colours that make up a picture. Drop in a photo, a screenshot, a logo or a painting and it lists between three and twelve main colours, each with the share of the image it covers, so you can tell the background tone from a small accent at a glance.

Under the hood it groups every pixel with k-means clustering in OKLab, a colour space built so that equal distances look equally different to the human eye. That keeps the palette varied instead of returning five shades of the same sky, and the same image always gives the same result. If you need one exact colour, point at the picture: a magnifying loupe shows the pixels under your cursor or finger, and a click picks the colour of that one pixel, which you can copy or add to the palette.

Designers, developers and crafters can copy any colour as HEX, RGB or HSL, sort the palette by share, hue or lightness, and export it as CSS variables, a Tailwind theme or JSON, or save a palette card image to share. It all runs in your browser, so your photo is never uploaded.

1. Press “Choose an image”, drop a file onto the box, or paste a screenshot.
2. Move the “Colours” slider to choose how many main colours you want, from 3 to 12.
3. Use “Sort by” to order them by Share, Hue or Lightness. Press the × on a swatch to drop a colour you don’t want.
4. Point at the image to see the loupe, then click or tap to pick a pixel. Press “Copy” or “Add to palette”.
5. Press HEX, RGB or HSL on any swatch to copy that value.
6. Choose CSS variables, Tailwind or JSON and press “Copy code”, or press “Download palette card (PNG)”.

• Between 3 and 12 main colours, each with its percentage share of the image and a share bar across the top.
• Perceptual k-means clustering in OKLab, run in a background worker so the page never freezes.
• Pixel picker with a zoom loupe showing 11 × 11 pixels, for mouse, touch and keyboard (arrow keys move, Enter picks).
• Picks read the image itself at up to 2048 pixels across, not the shrunk preview on screen.
• One-tap copy of HEX, RGB and HSL for every colour, plus the closest CSS colour name as a friendly label.
• Sorting by share, by hue round the colour wheel (greys last) or from light to dark.
• Exports as CSS custom properties, a Tailwind CSS v4 theme and v3 config, or JSON with hex, RGB, HSL, name and share.
• A 1200 pixel wide PNG palette card with your photo and labelled swatches.
• Reads JPG, PNG, WebP, AVIF, GIF, HEIC, TIFF, BMP and SVG. See-through pixels in PNGs are ignored.

• Start with five or six colours for a usable brand or interior palette. Go higher for busy photos, lower for logos.
• Small accents such as a red door or a yellow flower may only appear at eight or more colours, or you can pick them directly with the loupe.
• Phone photos often contain slight colour noise. If two swatches look almost identical, lower the colour count or remove one with ×.
• Each swatch is the average of a group of similar pixels, so it may differ slightly from any single pixel. Use the picker when you need one exact value.
• For text on a coloured background, check the contrast before using a pair in a design.