My Tool Studio
Color

Color Palette from Image

This tool builds a color palette from an image: drop, paste or upload a photo, screenshot or logo, or load one from a URL, and get its main color plus a palette of 2 to 16 colors. Click or drag on the image to pick any exact pixel, with a magnifier to aim and arrow keys for fine control, and copy it as HEX, RGB or HSL. Every picked color is kept in a list. Sort the palette by frequency, hue or lightness, show codes as HEX, RGB or HSL, and export the palette with your picks as CSS, SCSS, Tailwind, JSON, SVG, PNG, ASE or PDF. Designers use it to pull brand colors from a logo or theme a site around a photo. The image never leaves your device.

Always freeNo sign upRuns in your browser

Drop an image here, paste one with Ctrl+V or Cmd+V, or

Images stay in your browser. Nothing is uploaded.

Add an image to get its main color and palette. Then click, drag or use the arrow keys on the image to read any pixel. PNG, JPG, WEBP, GIF, SVG and BMP work.

How to use

01

Add an image

Drop an image on the box, paste a screenshot with Ctrl+V or Cmd+V, press Choose image, or paste an image address and press Load URL. Some sites block reading their images, in which case download and upload the file.

02

Adjust the palette

Drag Palette size from 2 to 16, choose an Order, and switch the codes between HEX, RGB and HSL.

03

Pick pixels and export

Click or drag on the image, or focus it and use the arrow keys and Enter, to pick exact pixels. Picked colors collect in a list. Copy them, or export them with the palette in the format you need.

Why Color Palette from Image

Tips for a clean palette, and ways to use it

The palette reflects every pixel in the image, so what you upload matters more than any setting. A few habits give cleaner results. Afterwards, check text and background pairs in the Color Contrast Checker before using the colors in a design.

  • Crop to the part you care about. A product photo on a gray table will otherwise include the table.
  • Avoid noisy or busy backgrounds, which add muddy in-between colors.
  • Use a PNG for logos and flat graphics, since JPG compression adds stray shades around edges.
  • Brand colors from a logo: set 2 to 4 colors, then click each shape to confirm the exact HEX.
  • Moodboards: use 6 to 8 colors from a photo to capture its overall feel.
  • Website themes: take the main color for backgrounds or headers and a brighter picked pixel as the accent for buttons.

Common questions

How do I get a color palette from an image?
Upload the image and the tool groups similar pixels to find the most common colors, then shows them as swatches with HEX codes. Set Palette size to the number of colors you want and press Copy all HEX.
How do I find the hex code of a color in a picture?
Upload the picture and click on the spot you want. The Picked pixel card shows the exact HEX, RGB and HSL of that pixel. Zoom into flat areas, since photos often have noise and gradients.
Can I extract colors from a screenshot?
Yes. Save the screenshot as PNG or JPG and upload it. Screenshots of interfaces work well because they have large flat areas, and clicking a button or background gives its exact rendered color.
How many colors should a palette from an image have?
Five to eight is a good range for most design work: enough to capture the mood, few enough to use. Logos often need only 2 or 3. Use 12 to 16 when you want to catch small accent colors.
Is my image uploaded to a server when I extract colors?
No. The file is opened in your browser and read with the canvas, and the palette is calculated on your device. Nothing is sent to a server, and closing the tab discards the image.
Can I get brand colors from a logo image?
Yes. Upload the logo and set Palette size to 2 to 4, or click each part of the logo to pick exact pixels. Pure white and transparent pixels are skipped, so a logo on a white or transparent background gives just the logo colors. Anti-aliased edges can add in-between shades, so click the middle of each shape.
Why does the main color look duller than the photo?
The main color is an average of a large group of similar pixels, so shadows and highlights pull it toward a middle tone. For the most vivid color, click directly on the brightest area you want instead.
Which image formats does the palette extractor support?
Any format your browser can display: PNG, JPG, WebP, GIF, SVG and BMP work everywhere, and AVIF in current browsers. iPhone HEIC photos usually do not open in desktop browsers, so convert them to JPG first. Files up to 50 MB are accepted.
Can I extract colors from an image URL without downloading it?
Often, yes. Paste the address into the box and press Load URL. It works when the site allows other pages to read its images. If the site blocks it, the tool says so, and you can save the image and upload it instead.

More Color tools

View all