Color Picker & Palette

Pick colors and extract the dominant color palette (HEX/RGB) from any image.

No upload

Loading tool…

Processing happens on your device using your browser's CPU/GPU. Results are kept only in this tab's memory and are wiped when you click “Clear” or close the page.

About Color Picker & Palette

Color Picker & Palette pulls the dominant colours out of any image and shows them as HEX and RGB values with the share of the picture each one covers. You can ask for 5, 8 or 12 colours, click anywhere on the image to sample one exact pixel, and copy the whole set as CSS custom properties. Designers, developers and anyone building a brand kit can work from a photo without uploading it anywhere.

How to use Color Picker & Palette

  1. Choose an image - a photo, a logo, a screenshot or a poster.
  2. Pick a palette size of 5, 8 or 12 colours.
  3. Click any point on the image preview to pick that exact pixel - the HEX code is copied for you.
  4. Click a swatch to copy its HEX code, or use Copy as CSS variables for the whole palette.

What people use it for

  • Building a website or presentation colour scheme that matches a company logo or product photo.
  • Getting the exact brand HEX codes out of an old logo file when no brand guide exists.
  • Choosing matching colours for a poster, wedding card or festival banner from a reference image.
  • Grabbing CSS variables for a landing page straight from the hero photograph.

Good to know

Works on JPG, PNG, WEBP and other common formats. The analysis runs on a preview capped at 800 pixels for speed, so the percentages are a close estimate rather than an exact pixel count. Nearly transparent pixels are skipped. Colours are clustered, so a photo with many similar shades may return several near-identical swatches - try a smaller palette size in that case.

Frequently asked questions

How are the dominant colours chosen?
The image is sampled and similar pixels are clustered together, then the clusters are ranked by how much of the picture they cover. The percentage next to each swatch is that share.
Can I get the colour of one specific spot?
Yes. Click that point on the image preview and the exact pixel colour appears under Picked, with its HEX code copied to your clipboard automatically.
What does Copy as CSS variables give me?
A ready-to-paste :root block defining --color-1 through --color-N with the palette's HEX values, which you can drop straight into a stylesheet.
Is my image uploaded to extract the palette?
No. The picture is drawn to a canvas in your browser and the pixels are read locally, so the file never leaves your device.