Skip to main content
floow.designfloow.design

Color Picker from Image

Drop in a screenshot or photo and pull out every colour in it, ready to paste into your app's theme.

Pick colours freeSign up to copy & export the paletteNo usage limits
Drop an image, click to choose, or press ⌘V to pasteProcessed in your browser — nothing is uploaded
Add an image to sample pixels and pull out its palette.

Most app palettes start life inside a picture — a brand photo, a competitor's screen, a shot from a moodboard. This tool reads that image and gives you the colours back as values you can actually use: HEX, RGB and HSL, sorted by how much of the image they occupy.

The extractor pulls the dominant palette automatically, and nothing is uploaded to a server — the image is read in your browser.

What a colour picker actually reads from an image

The tool samples pixels across the image, buckets them into a coarse colour cube, and ranks the buckets by how often they appear. What comes back is the mathematically dominant palette — usually the background and the largest areas of the photo — rather than the one accent colour that caught your eye. Both are useful, but they answer different questions: the dominant set tells you what the image feels like, and it is the right starting point for surfaces.

Turning an extracted palette into a mobile theme

A phone screen needs fewer colours than you think: a background, one or two surface tints, a primary text colour, a muted text colour, and a single accent for actions. Take the extracted palette and assign roles before you start designing — an unassigned palette becomes an inconsistent interface. Check any text-on-surface pair for contrast before you commit to it.

Why colour choices matter more on mobile

Phone screens get used one-handed, outdoors, at arm's length, at full brightness and at 10% brightness. Colours that read beautifully on a calibrated desktop monitor can disappear entirely in sunlight. Sample generously, then test the pairs that carry meaning — the accent on the background, and body text on every surface you use.

How to use the color picker from image

  1. Drop in a screenshot or photo, click to choose a file, or just press ⌘V to paste one straight from your clipboard.
  2. Click anywhere on the image to sample that exact pixel — this is how you get the one accent colour that caught your eye rather than the background.
  3. Read the picked colour in HEX, RGB, HSL and CMYK, and click any format to copy just that value.
  4. Use the extracted swatches below for the dominant palette, ranked by how much of the image each occupies.
  5. Assign roles before you design: a background, one or two surfaces, a text colour and exactly one accent.
  6. Run your chosen text-and-background pair through the contrast checker before committing to it.

Use it with

  • Contrast Checker — Test any foreground and background pair against WCAG AA and AAA, at both body and large text sizes.
  • Hex to RGB Converter — Convert between HEX, RGB, HSL and the platform formats iOS and Android expect.
  • Gradient Generator — Build linear and radial CSS gradients with as many stops as you need, and copy the code.

Frequently asked questions

How do I pick a colour from an image?
Add the image, then click the exact pixel you want. The tool reads that pixel off a canvas and gives you its HEX, RGB, HSL and CMYK values. You can also skip clicking entirely and take the automatically extracted palette, which ranks the image's dominant colours by how much of it they cover.
How do I find the exact colour code of an image?
Clicking samples a single pixel, so the code you get is exact rather than averaged. Zoom your browser in first if you are targeting something small like a one-pixel border or a piece of fine type — the picker reads whatever pixel sits under the cursor.
What is a HEX colour code?
Six hexadecimal digits describing how much red, green and blue to mix, two digits each. #FF0000 is full red, no green, no blue. It encodes exactly the same information as an rgb() value — 255, 0, 0 — just written in base 16.
Is this colour picker really free with no limits?
Yes. Picking colours and extracting palettes is completely free and unlimited — no account, no watermark, no cap on how many images you run. A free account is only needed to copy the whole palette out in one go.
Are my images uploaded to your servers?
No. The image is read and analysed entirely in your browser using the Canvas API. It never leaves your device, which is why the extraction is instant even for large photos.
How many colours does it extract from an image?
Up to eight, ranked by how much of the image each one occupies. That is deliberately more than a typical mobile theme needs — you want a few options for the accent, not a full spectrum to sift through.
What image formats can I use?
Anything your browser can display: PNG, JPEG, WebP, GIF and SVG all work. Screenshots straight from a phone or simulator are the most common input.

Related tools