About the Image Color Picker & Palette Extractor
This image color picker does two jobs. Upload a photo, screenshot, logo or artwork and click anywhere on it to read the exact color of that pixel as HEX, RGB and HSL, with the nearest color name. At the same time the tool analyses the whole image and extracts its dominant palette — the handful of colors that make up most of the picture — with the share of the image each one covers, ready to copy as HEX codes or CSS variables.
Designers use it to build a palette from a mood-board photo, developers to grab brand colors from a logo or mock-up, and marketers to match social graphics to a product shot. Everything runs in your browser: the image is never uploaded to a server, so it is safe for unreleased designs and private photos.
The palette is found with a weighted median-cut algorithm, the classic method used by image quantisers, after the image is scaled down to speed up analysis. The calculator below shows the same algorithm on a list of sample colors with pixel counts, which you can replace with your own values.
How to use the image color picker & palette extractor
- 1Upload or drop an image (PNG, JPG, WebP, GIF or SVG).
- 2Click anywhere on the image to pick that pixel’s exact color.
- 3Choose how many palette colors to extract.
- 4Copy individual HEX codes, the palette list or the CSS variables.
Formula and method
Median cut starts with every color in one box. It repeatedly takes the box whose widest channel (red, green or blue) has the largest range, sorts its colors along that channel and splits it where half of the pixels fall on each side. This continues until there are as many boxes as palette colors you asked for. Each palette color is the pixel-weighted average of its box, and its share is the box’s pixel count divided by the total.
For uploaded images the picture is first scaled to at most 160 × 160 pixels, mostly transparent pixels (under 50% opacity) are skipped, and similar colors are grouped into 32 levels per channel before median cut runs. Picked pixel colors are read one pixel at a time, without averaging, from the image at its original size (very large images are capped at 4096 px on the longest side).
- cᵢ
- RGB color of sample i
- wᵢ
- Number of pixels with that color
Worked examples
Sunset photo sample, 5-color palette
The 187 sample pixels are split into five groups. The three night-sky blues and the near-black #14121C merge into #1E2B4B, which covers 102 of 187 pixels (54.5%); pink cloud and orange sun average to #E07B5C; gold and pale glow form #F7C980; the dark plum silhouette #3B1F2B and purple #7A4E8C stay separate. The plain average of all pixels is a dull #634E56.
Two-color logo
A logo with a white background and one red brand color cannot be split into more than two groups, so the palette has two colors: white at 70% and red #E63946 at 30%.
Frequently asked questions
How do I get the HEX code of a color in an image?+
Upload the image and click the spot you want. The tool reads that exact pixel and shows its HEX, RGB and HSL values with a copy button. Zoom into your image first if the area is small, since edges are often blended with neighbouring colors.
Is my image uploaded anywhere?+
No. The image is opened directly in your browser with the Canvas API and analysed on your device. Nothing is sent to a server, so you can safely use it for confidential designs, screenshots and personal photos.
Why does the palette not include a color I can see?+
Median cut favours colors that cover many pixels. Small accents, such as a red button in a large photo, get merged into a bigger group. Increase the palette size or pick that accent directly by clicking it.
Why is the picked color slightly different from the original design file?+
JPEG compression, image scaling and embedded color profiles all shift pixel values slightly. For brand-exact colors, pick from a lossless PNG export or check the original design file’s values.
What is the difference between the dominant and the average color?+
The dominant color is the palette group covering the most pixels — a real color that appears in the image. The average color blends every pixel together and can be a muddy tone that does not actually appear anywhere.