Drop any image to extract its dominant color palette. Get HEX, RGB and HSL codes. Hover to preview and click to pin exact pixel colors. Nothing leaves your device.
Last updated: July 2026
3-12
Colors
HEX, RGB, HSL
Formats
Free
Forever
Private
No Uploads
Drop any image to extract its colors
JPEG, PNG, WebP, AVIF, GIF, SVG. Your image never leaves this device.
Drop or select your image
JPEG, PNG, WebP, AVIF, GIF or SVG. Nothing is uploaded.
Choose how many colors
Pick 3, 5, 6, 8, 10 or 12 for the extracted palette.
Review the palette
Swatches appear with HEX, RGB and HSL values.
Or pick an exact pixel
Hover to preview in the loupe, click to pin a color.
Copy or export
Copy any value, export as CSS, or download a PNG swatch.
Before or after using this tool
Brand designers
Extract a brand's exact colors from a logo or product photo. Get clean HEX codes to drop into Figma, Sketch or CSS.
Web developers
Copy CSS custom properties directly. Match a client's brand colors without guessing or sampling from screenshots.
Social media creators
Build a consistent color palette for feed posts and stories by extracting colors from your key brand image.
Interior designers
Extract colors from a mood board photo, fabric swatch or paint sample to build a cohesive room palette.
Photographers
Analyse the color mood of a shot. See the dominant tones to guide editing or to match across a series.
Print designers
Identify exact RGB values from a reference image before converting to CMYK for print production.
There's a specific kind of frustration that designers and developers know well. A client sends over a logo file, you zoom into it, try to eyedrop a color, and end up with three slightly different HEX codes depending on where you click and which tool you're using. Or you're building a website and trying to match the brand colors from a JPEG reference image, and every attempt feels slightly off. The image color picker exists to solve that exact problem.
Click a point on the image and the tool reads the actual pixel data from the full-resolution file, not a screenshot of it, not a compressed re-rendering. That's why the HEX code you get here for a specific point matches what you'd see if you opened the same file in Photoshop or Figma and sampled from it directly.
A typical photograph contains hundreds of thousands of distinct colors. Showing all of them would be useless. What you actually want is a small set of the colors that define the visual character of the image. The tool uses a median-cut quantization algorithm to find them, working from a downsampled copy of your image for speed. Think of it like sorting a pile of thousands of colored marbles into groups by shade, then picking the most representative marble from each group. Very dark and very light pixels, plus any transparent ones, are left out of this process on purpose, so a plain white or black background doesn't crowd out the more distinctive colors in your subject.
You can extract 3, 5, 6, 8, 10 or 12 colors depending on what you need. For a brand logo or a product with a clean background, three to five colors is usually the right call. For a landscape photo or a complex illustration where you're trying to understand the full tonal range, eight to twelve gives you a more complete picture.
These are two different things and they're useful in different situations. Palette extraction tells you what the dominant colors are across the whole image, minus the near-white, near-black and transparent pixels mentioned above. Pixel picking tells you the exact color value at a specific point, read from the full-resolution image, and you can pin up to 8 of these at once. If you're matching a button color to a logo, you want pixel picking, click directly on the part of the logo you're matching and you'll get the exact HEX code for that point. If you're building a color scheme inspired by a photo, palette extraction is what you want.
Once you've got the palette you want, the CSS export button outputs the colors as custom properties that you can paste directly into your stylesheet, named in palette order. Something like --color-1: #2D4A8C; /* rgb(45, 74, 140) | hsl(220, 51%, 36%) */ ready to drop in and rename to something more descriptive if you want. This saves the copy-paste-reformat cycle that eats up time when you're manually transferring colors from a design tool into code. If you need the palette as a visual reference rather than code, the PNG download gives you a swatch image you can drop into a Figma file, a mood board, or a client presentation.
Expecting white or black to show up in the extracted palette
Near-white and near-black pixels are deliberately excluded from palette extraction so the result focuses on subject colors, not a plain background. Use the pixel picker to grab an exact white or black point instead.
Assuming palette extraction reads full resolution
Palette extraction works on a downsampled copy of your image for speed. Pixel picking, by contrast, always reads the full-resolution file. For most images the palette result is effectively identical either way, but it's worth knowing if you're troubleshooting an unexpected color.
Only pinning one color at a time
You can pin up to 8 colors by clicking different points on the image. Clicking a pinned color again removes it. No need to screenshot or note down colors one at a time.
Uploading a HEIC photo directly
This tool can't render HEIC files, since it relies on your browser's native image support rather than a dedicated decoder. Convert to JPEG or PNG first.
Expecting the CSS export to use semantic names
The exported CSS variables are named --color-1, --color-2 and so on in palette order, not by role like --color-primary. Rename them in your stylesheet if you want more descriptive names.
The tool uses a median-cut quantization algorithm, the same general technique used by tools like Color Thief. It reads pixel data from a downsampled copy of your image (capped at 200px on the longest side for speed), groups similar colors together, and returns the most representative color from each group. Everything runs locally, your image is never sent to a server.
Not quite. Extremely dark and extremely light pixels (near-black and near-white) are excluded from palette extraction, along with any fully transparent pixels. This keeps the palette focused on the actual subject colors rather than being dominated by a plain white or black background. If you specifically need a pure white or black swatch, use the pixel picker to click that area directly instead.
Each extracted color shows HEX (for CSS and web), RGB (red, green, blue values), and HSL (hue, saturation, lightness). Click any value to copy it to your clipboard instantly.
Yes. Hover anywhere on the uploaded image and a magnifying loupe shows a live preview of the color under your cursor. Unlike palette extraction, pixel picking reads from the full-resolution image, not a downsampled copy, so it's exact.
Yes. Clicking a point on the image pins that color to a list below, up to 8 at once. Clicking the same color again removes it. This is useful for building a small palette from specific spots in a photo rather than relying on automatic extraction.
You can choose 3, 5, 6, 8, 10 or 12 colors using the palette size buttons. Smaller palettes work well for branding and logos. Larger palettes are better for complex photographs.
Yes. Copy the full palette as CSS custom properties with one click, named --color-1, --color-2 and so on with the HEX and RGB/HSL values noted alongside each, or download the palette as a PNG swatch image to use in design tools.
No. This tool only reads pixel color data, it never edits, resizes or re-saves your original file. The only file it can produce is the optional PNG swatch of your extracted palette.
Not on this page. This tool relies on your browser's native image rendering, which doesn't support HEIC. Convert the photo to JPEG or PNG first using the HEIC converter, then drop the converted file in here.
Yes, SVG is one of the accepted formats here and renders directly in the browser for both palette extraction and pixel picking.
No. Your image never leaves your device. All color extraction and pixel picking happen entirely in your browser. You can verify this by disconnecting from the internet, the tool still works perfectly.
No, this page is for color extraction only. Use the resize or compress tools separately if you also need to change an image's dimensions or file size.
No sign-up. No uploads. Drop your image above and get HEX, RGB and HSL codes in seconds.
