How to Get a Color Palette from an Image

Updated July 24, 2026

To get a color palette from an image, you analyze the picture's pixels to identify its dominant colors and convert them into hex, RGB, or HSL codes. There are four common ways to do this — a browser-based generator, an operating-system color picker, a design-software eyedropper, or manual visual sampling — and the right choice depends on how fast, private, and precise you need the result to be.

The 4 Ways to Get a Color Palette from an Image

1. Browser-Based Color Palette Generator (Fastest, Private)

A dedicated color palette from image generator like PhotoTones reads the entire image at once and returns a curated set of colors automatically — no manual clicking required. Upload a JPG, PNG, WebP, or GIF, and PhotoTones runs the Vibrant.js algorithm locally in your browser, returning up to six categorized swatches (Vibrant, Dark Vibrant, Light Vibrant, Muted, Dark Muted, Light Muted) with hex, RGB, and HSL codes in under 1 second. Because the analysis happens entirely on your device, the image is never uploaded anywhere.

2. Built-in OS Color Picker (Single Pixels, No Upload)

macOS ships a Digital Color Meter utility, and Windows 11 includes a Color Picker in PowerToys. Both let you hover over any pixel on screen and read its RGB or hex value. This works entirely offline and needs no third-party tool, but it only samples one pixel per click — building a full six-color palette this way means manually selecting several representative spots and recording each value yourself.

3. Design Software Eyedropper (Photoshop, Figma, Illustrator)

If you already have an image open in design software, the built-in eyedropper tool samples a pixel and adds it directly to your swatches or color library. This is convenient when the palette needs to live inside an existing Figma file or Photoshop document, but it is slower for exploratory work — you repeat the click-and-record cycle for every color, and there is no automatic detection of which colors are actually dominant versus incidental.

4. Manual Visual Sampling (No Tools, Least Precise)

Artists and illustrators sometimes build a palette by eye — studying a reference image and mixing or approximating colors from memory or a color wheel. This method builds color-theory intuition over time, but it is the least precise and the slowest way to get consistent hex codes for production design work like websites, UI, or brand guidelines.

Step-by-Step: Get a Color Palette from an Image in Under 10 Seconds

The browser-based method is the quickest path from image to usable codes:

1. Open phototones.com — no signup or download required.
2. Upload your image. Click "Choose an image" and select a JPG, PNG, GIF, WebP, BMP, or SVG file.
3. Click "Generate Color Palette." PhotoTones displays up to six swatches with hex, RGB, and HSL codes.
4. Copy what you need. Click any swatch to copy its hex code individually, or use "Copy All HEX" to grab every value at once.

For a deeper walkthrough with role-assignment guidance for each swatch, see how to create a color palette from a photo.

Which Method Should You Use?

• Working with client or unreleased images? Use a browser tool that processes locally, like PhotoTones — nothing leaves your device.
• Need the palette fast for a moodboard or pitch? A generator beats manual sampling every time — six curated colors in under a second versus minutes of clicking.
• Building inside an existing Figma or Photoshop file? Extract the palette with a generator first, then paste the hex codes into your document's swatches — faster than eyedropping each color individually.
• Studying color theory as an artist? Manual sampling and a color wheel still build the most intuition, even if it's slower.

How Many Colors Should You Get from an Image?

Most web and brand projects need four to six colors: a background/surface tone, a primary text color, one or two accents, and a border or divider shade. PhotoTones' free tier returns six swatches, which covers this range. Larger design systems — multi-surface apps, seasonal campaigns, extended brand kits — often need 8 to 12 colors; PhotoTones Pro adds a ColorThief-powered hybrid extraction to reach that range without visual redundancy.

Troubleshooting: When the Palette Looks Wrong

Every color looks muddy or brown. This usually means the image has a busy, low-contrast background competing with your subject. Crop tightly on the part of the image you actually care about before generating the palette.

One color dominates every swatch. A large solid-color background (sky, wall, backdrop) can overwhelm the extraction. Try a version of the photo cropped closer to the subject, or regenerate — PhotoTones cycles through variation presets that reweight saturation and color count.

The palette doesn't match what you see. Extraction algorithms weigh pixel frequency and saturation, not perceived importance. A small but vivid detail (a red logo, a blue sign) may not surface if it occupies few pixels. Crop the source image to emphasize the region you want represented.

Colors fail accessibility contrast checks. Vivid extracted accents often fail WCAG text-contrast thresholds against extracted backgrounds. Pair them with audited neutrals — see our WCAG color contrast guide for a systematic approach.

FAQ