What's the difference between the palette and the eyedropper?

The palette shows the 6 most dominant colors across the entire image — good for extracting a design system from a photo. The eyedropper lets you pick an exact pixel — good for matching a specific shade, verifying a hex value, or sampling a single element.

Why do large images get downscaled?

Pixel analysis on a 12MP photo would require reading 12 million pixels — slow and memory-heavy. Downscaling to 1,600px on the long edge reduces that to ~1.5 million pixels with no visible loss of accuracy for palette extraction. The eyedropper still reads from the downscaled buffer, so pixel coordinates refer to that.

What's the format of the CSS export?

The output is a :root block with numbered custom properties, ready to paste into any stylesheet. Example: `:root { --color-1: #FF5733; /* orange */ --color-2: #C70039; /* dark red */ ... }`. Each property includes the auto-detected color name as a comment.

Are the color names accurate?

The names come from an HSL hue-bucket heuristic (red, orange, yellow, green, cyan, blue, violet, pink, plus light/dark variants). They're approximations, not matches to named color databases. For a 'named' color like 'coral' or 'teal', expect the nearest bucket name instead.

Does the tool support transparent images?

Yes. Fully transparent pixels are skipped during palette extraction. Semi-transparent pixels are blended with white before sampling — this reflects what the color looks like when displayed on a typical white background.

Is my image uploaded anywhere?

No. Everything runs instantly. Your image is decoded into memory, analyzed, and discarded — nothing leaves your device.

Can I pick colors on mobile?

Yes. The eyedropper works with touch — tap and drag to move the loupe, lift your finger to commit the color at that point. For precise pixel targeting on small screens, zoom the browser in or use a larger source image.

Ad Slot — Header Banner

Eyedropper + Auto Palette · 100% Private

Image Color Palette & HEX Extractor

Upload any photo to extract its dominant color palette and pick precise HEX, RGB, or HSL values with an interactive eyedropper. Copy individual codes, or download the whole palette as CSS variables. Everything runs instantly — no uploads.

#HEX#RGB#HSL#Palette#CSS#Eyedropper

Drop an image or click to browse

PNG, JPG, WebP, AVIF, GIF · Single file · Analyzed instantly

Upload an image to extract its palette

PNG, JPG, WebP, AVIF, or GIF. The eyedropper gives pixel-level precision; the palette shows the 6 most dominant colors.

Ad Slot — Below the Fold

How to extract colors from an image in 3 steps

Dominant palette + pixel-level eyedropper.

Upload your image

Drop a PNG, JPG, WebP, AVIF, or GIF. The tool downsamples it internally for speed, then runs a median-cut quantizer to find the 6 most dominant colors.

Pick specific pixels

Hover over the image to activate the magnifier loupe. It zooms in 12× so you can target individual pixels. Click any point to lock that color in the picked-color card.

Copy codes or export CSS

Each swatch shows HEX, RGB, and HSL — click any row to copy. Use the Copy CSS button to grab :root variables for pasting into a stylesheet, or Download CSS for a .css file.

Frequently Asked Questions

It uses median-cut quantization — a classic algorithm that recursively splits the color space along its longest axis at the median, then averages each resulting region. This produces a palette that reflects the image's actual color distribution better than naive histogram sampling.

About the Image Color Palette & HEX Extractor

Everything you need to know

Why extract palettes from images?

Designers, developers, and marketers frequently need to match colors from a brand asset, a photograph, or a competitor's UI. Manual color picking is tedious and error-prone. This tool automates the discovery of dominant colors and provides pixel-level sampling for precision work — all in one interface. Use it to build a design system from a mood board, extract brand colors from a logo, or pull a coherent palette from a landscape photo.

Understanding the color formats

HEX is the standard for web and design tools — six hexadecimal digits representing red, green, and blue (e.g. #FF5733). RGB expresses the same values as decimal triplets (255, 87, 51) — better for programmatic use. HSL describes hue, saturation, and lightness in human-readable terms (11°, 100%, 60%) — better for constructing variations like 'darker by 20%' or 'more saturated'. Each swatch shows all three, and any row is one click to copy.

Median-cut quantization explained

Median-cut is a classic algorithm from 1980 that reduces millions of colors to a small representative set. It works by repeatedly dividing the color space along its longest dimension, splitting pixels at the median value. After N splits you have N regions; the average of each region becomes a palette color. This produces perceptually balanced palettes — unlike naive k-means, which can get stuck in local minima, or histogram approaches, which favor visually-similar clusters.

Privacy, performance, and browser support

Everything runs on your device — your image never leaves your browser. Palette extraction on a typical 4MP photo takes 100–300ms. The eyedropper reads directly from the in-memory pixel buffer with no perceptible latency. The tool works in every modern browser (Chrome, Firefox, Safari, Edge) and remains functional offline after first load.