256 Tools

Image Color Extractor — Get the Color Palette from Any Image (No Upload)

Drag & drop an image here, or click to choose

PNG, JPEG, WebP and GIF supported

Your image is never uploaded — all processing happens in your browser.

Related external tools

Some links are affiliate links.

Adobe Creative CloudCreative app suiteCanvaEasy graphic design

Related tools

Color ConverterConvert any color between HEX, RGB, HSL, HSV and RGBA at once. Edit any value, copy with one click, with alpha and WCAG contrast.Color Palette GeneratorGenerate harmonious color palettes from a base HEX using complementary, analogous, triadic and more schemes. Lock colors, reshuffle the rest, and export to CSS variables, Tailwind or JSON.Gradient GeneratorCreate linear, radial and conic CSS gradients with multiple color stops. Adjust angle, shape and center, then copy the background CSS or Tailwind value in one click.Font Pairing ToolFind curated Google Fonts heading × body pairings, preview them live, and copy the CSS in one click.

This free image color extractor pulls the dominant color palette from any photo, illustration or screenshot — right in your browser, with no upload. Drop in a PNG, JPEG, WebP or GIF, and the tool instantly returns the key colors using a median-cut algorithm, each with its HEX code, RGB values and approximate share (%) of the image. You can choose how many colors to extract (2–12), copy any HEX with one click, copy all colors at once, or export the full palette as CSS variables or JSON. Unlike a simple eyedropper that picks a single pixel, this tool gives you the overall color palette of the image — ideal for pulling the color scheme out of a reference photo, checking brand colors, or generating CSS/JSON directly from your artwork.

How to use

  1. Drag & drop an image onto the area above, or click to open a file picker. PNG, JPEG, WebP and GIF are supported.
  2. The dominant color palette appears instantly — each swatch shows the HEX code, RGB values and the color's approximate share of the image (%).
  3. Use the slider to choose how many colors to extract (2–12). The palette updates immediately without re-loading the image.
  4. Click a swatch or the copy button to copy its HEX. Use 'Copy all HEX' to grab all colors at once.
  5. Switch to the Export tab to get a ready-to-paste CSS variables block or JSON, then copy or download it.
  6. No install, no sign-up. Your image never leaves your device.

Features and how it works

Dominant color extraction (whole-image palette)

The tool doesn't just pick one pixel — it analyzes the entire image using median-cut color quantization. The algorithm groups similar colors into clusters and picks a representative color for each cluster, giving you the overall color story of the image. To keep things fast, the image is scaled down to a small sample (longest side ≤ 160 px) before analysis, so even very large images process instantly.

HEX, RGB and share (%) of each color

Each extracted color shows its HEX code (#RRGGBB, uppercase), RGB values, and its approximate share of the image — the percentage of analyzed pixels that belong to that color cluster. Colors are sorted from largest share to smallest, so the most dominant color appears first. Note: the percentage is approximate (based on the downscaled sample and color grouping), and the values may not sum to exactly 100% due to independent rounding.

Choose how many colors to extract

Use the slider to set the number of colors from 2 to 12. Fewer colors give you the broadest strokes; more colors capture subtler shades. Because the analysis reuses the already-scaled pixel data, changing the count is instant — no re-loading the image.

Copy and export (CSS variables / JSON)

Each swatch has a copy button for its HEX, and 'Copy all HEX' grabs every color at once. The Export panel generates a ready-to-paste CSS variables block (:root { --color-1: #...; }) or a JSON object containing each color's HEX, RGB array and ratio (0–1). Color values are always CSS-compatible — no locale formatting, no thousands separators.

No upload — your image stays on your device

Image loading, scaling, and color analysis all happen locally using the browser's Canvas API. Your image is never sent to any server, stored or shared. This is the key advantage over web services that require you to upload your files.

Use cases

Extract a color scheme from a reference image or photo

Drop in a photo, illustration or screenshot of a design you like. The palette shows you the main colors and their proportions — a great starting point for building a matching color scheme for a website, slide deck or design project.

Get the brand colors from a logo or brand asset

Drop in a logo or brand asset to get the exact HEX codes for each color in it. Useful for making sure your website, documents and presentations use the correct brand colors.

Export colors directly to CSS or JSON

Use the Export panel to copy CSS variables (:root { --color-1: ... }) or a JSON object straight into your code. The share (%) shows which color is the dominant one, the accent, and so on — so you can assign design roles at a glance.

Notes and limitations

  • Approximate values: the tool scales the image down before analysis and groups similar colors together, so the extracted colors and percentages are approximations, not exact pixel counts.
  • Percentages may not sum to 100%: each color's share is rounded independently to one decimal place. The total can be slightly above or below 100% — this is honest rounding, not a bug.
  • Fewer colors than requested: if the image has fewer distinct colors than the number you chose (for example a solid-color image), only as many colors as exist are returned. No fake colors are added.
  • Transparent pixels are excluded: for PNG images with transparency, fully or mostly transparent pixels (alpha < 128) are not counted. A fully transparent image will return no colors.
  • GIF animation: only the first frame of an animated GIF is analyzed — the tool treats it as a still image.

Frequently asked questions

Is my image uploaded to a server?
No. All processing happens locally in your browser using the Canvas API. Your image is never sent, stored or shared anywhere. This is the main advantage of this tool.
Can I extract the whole color palette, not just one color?
Yes, that's the main feature. The tool uses median-cut quantization to analyze the whole image and return the most representative colors as a palette, each with its share of the image. A simple eyedropper only picks one pixel.
How accurate is the share (%) for each color?
It's an approximation. The image is scaled down before analysis and similar colors are grouped together, so the percentage reflects the color's presence in the downscaled sample, not an exact pixel count. Use it as a guide for which colors dominate.
How many colors can I extract?
2 to 12. Use the slider to set the number. If the image has fewer distinct colors than you requested, only as many as exist are returned — no fake colors are added.
Which image formats are supported?
PNG, JPEG, WebP and GIF (first frame only). SVG, HEIC and other formats are not supported.
Can I use the extracted colors in my code?
Yes. Each color has a one-click HEX copy button, and the Export panel generates CSS variables (:root { --color-1: #...; }) or a JSON object with HEX, RGB and ratio — ready to paste into your project.
What happens with a transparent PNG?
Transparent pixels (alpha below 128) are excluded from the analysis, so they don't show up as black or white in the palette. A fully transparent image returns no colors.

We use cookies for ads and analytics.