Image Color Extractor
Get a color palette and exact pixel colors from any image. Runs in your browser.
About this image color extractor
This image color extractor pulls the main colors out of any photo, screenshot or logo and tells you how much of the picture each one covers. It's for designers, developers and anyone who needs real HEX codes from an image they already have.
You get 3 to 12 colors, each with a percentage and a code in HEX, RGB, HSL or OKLCH. Click a row and it's copied. Need one exact spot instead, like the blue of a button? Hover over the image, check the magnifier, and click. The keyboard works too: focus the image, nudge the crosshair with the arrow keys and press Enter.
The image never leaves your device. It's decoded and analysed in your browser, so unreleased designs and private photos stay private.
Features
Percentages for every color
Each swatch shows its share of the image, as a number and as a bar. A palette of 62% sand, 20% sea and 4% coral tells you far more than five equal squares.
Grouping that matches your eyes
Pixels are grouped in OKLab, a color space designed so equal distances look like equal differences. Similar shades land together and the averages stay clean, not muddy.
No near-duplicates
Groups that look the same are merged. A flat three-color logo gives you three swatches, not six versions of one blue.
Eyedropper with an 11 × 11 magnifier
The magnifier shows the pixels around the crosshair so you can avoid soft, blended edges. Arrow keys move one pixel, Shift plus an arrow moves ten.
Skip plain backgrounds
Turn on Skip near-white and near-black and a logo on a white page returns its brand colors instead of a big white swatch.
Exports you can paste
Copy or download CSS variables, SCSS variables, Tailwind v4 theme variables, JSON or a plain list. There's also a PNG card with every swatch and its HEX code.
How to use the image color extractor
- 1Drop, browse or paste an image. A sample opens by default.
- 2Choose how many colors you want, or click the image to pick exact pixels.
- 3Click a color to copy it, or export the palette as CSS, Tailwind, JSON or PNG.
When to use it
A palette from a mood photo
Take five colors from a beach shot, then build tints and shades from your favourite one for a full UI scale.
Matching a brand color
Drop in a screenshot of a website and pick the exact HEX of its header or button.
Design handoff
Turn a reference image into Tailwind or CSS variables and paste them straight into your project.
Paint, yarn and interiors
Photograph a room or a fabric and find its main colors before you shop for matching paint.
How does the extractor find the main colors?
It shrinks the image to about 256 pixels on its longest side first. That's plenty to judge which colors dominate, and it keeps things fast even for a 24-megapixel photo. Fully transparent pixels are ignored. Partly transparent ones are blended over white, the way they'd look on most web pages.
Next it counts similar pixels together in a 32 × 32 × 32 color histogram and moves each group into OKLab, the perceptual color space Björn Ottosson published in 2020 and now part of CSS Color Level 4. A weighted k-means step then looks for the number of colors you asked for. It starts from the most common color, then adds colors that are both common and far from the ones it already has.
That start is fixed, not random. Load the same image twice and you get the same palette. Finally, any two colors closer than a small OKLab distance are merged, which is why a simple image can return fewer swatches than you requested.
What's the difference between a dominant color and a pixel color?
A palette swatch is the average of a whole group of pixels. In a photo of the sky, no single pixel may have exactly that value, but it's the blue you actually see.
The eyedropper gives you one real pixel. Use it for flat artwork like logos, icons and buttons. On a JPG, zoom in with the magnifier first: compression adds faint noise, and the edge of a shape is often a blend of two colors.
How many colors should a palette have?
There's no fixed rule. These ranges work well in practice:
- 3 to 5 colors: a tight palette for a logo, slide deck or small website.
- 6 to 8: room for a couple of neutrals and supporting tones.
- 9 to 12: detailed photos and illustrations, or hunting for a small accent that fewer colors swallow.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Privacy | Analysed on your device, never uploaded | Image sent to a server |
| Color shares | Percentage and bar for every color | Unweighted swatches |
| Grouping | OKLab clustering with duplicate merging | RGB averaging, near-duplicate swatches |
| Eyedropper | Magnifier and full keyboard control | Mouse only |
| Export | CSS, SCSS, Tailwind, JSON, list and PNG card | Copy codes one at a time |
| Same image, same result | Yes, the seeding is fixed | Palette can change on every load |
Tips
- Missing a small accent? Raise the color count. Tiny areas only get their own swatch when there's room.
- Sort by lightness to get a ready-made light-to-dark order for backgrounds and text.
- Before you use an extracted color for text, check its contrast against the background. Photo colors are often mid-tones that fail WCAG 2.2 AA.
- Shot on an iPhone? HEIC only opens in Safari. Convert the photo to JPG first if you're on Chrome or Firefox.
- Want the color as HWB or CMYK too? Paste the HEX into the Color Converter.
Questions
How do I get the color code from an image?
Open the image, hover over the spot you want and click. The color goes into Picked colors, and clicking it copies the HEX, RGB, HSL or OKLCH value.
How do I extract a color palette from an image?
Drop, browse or paste the image and the palette appears straight away. Move the slider to choose between 3 and 12 colors, then copy a single code or export the whole set.
Why is a color I can see missing from the palette?
Small areas get absorbed into a larger, similar group. Raise the number of colors, or use the eyedropper on that spot to get its exact value.
Why did I get fewer colors than I asked for?
Colors that look the same are merged. A logo with three flat colors returns three swatches even if you asked for six, so you never get near-duplicates.
Which image formats can I use?
PNG, JPG, WebP, GIF, AVIF, BMP and SVG work in current browsers. HEIC opens only where the browser can decode it, mainly Safari. Animated GIF and WebP files use their first frame.
How are transparent images handled?
Fully transparent pixels are skipped. Partly transparent pixels are blended over white first, which is how they usually appear on a page.
Can I export the palette to CSS or Tailwind?
Yes. Pick CSS, SCSS, Tailwind, JSON or List under Export as, then copy or download it. The Tailwind option writes v4 theme variables, so you can use classes like bg-palette-1.
Is the eyedropper exact?
Yes, it reads the actual pixel under the crosshair. Images larger than about 16.7 megapixels are scaled down to fit the browser's canvas limit first, which can blend neighbouring pixels slightly.
Are my images uploaded?
No. Your image is opened and analysed in your browser and nothing is sent to a server.