Skip to main content
CalcChef

Color Palette Extractor

Extract 4 to 12 colors from an image by median cut and copy them as HEX, RGB, HSL or CSS variables, or download JSON; near-white is left out by default. How it works

Use the Color Palette Extractor

About the Color Palette Extractor

The Color Palette Extractor finds up to 12 colors in an image (10 by default) by median cut: it samples about one pixel in ten from a copy at most 600 px on the long side, splits the colors into boxes and gives each box's average as a hex code. White and near-white pixels, with every channel above 250, are left out unless you turn that off, so a white background does not take a swatch.

How many pixels are looked at

ImageCopy sampledEvery nth pixel of a rowPixels looked at
6000 x 4000600 x 4001024,000
4000 x 3000600 x 4501027,000
1080 x 1080600 x 6001036,000
100 x 100100 x 10025,000
50 x 5050 x 5012,500

The page reports these counts under the palette, with the transparent and near-white pixels it skipped.

Worked example: a 100 x 100 test image

Leave out white and near-whitePixels usedNear-white skippedPalette
On4,0001,000#1D4ED8, #F59E0B
Off5,0000#FFFFFF, #1D4ED8, #F59E0B

The top 20 rows are white; below them the left half is #1D4ED8 and the right half #F59E0B.

Frequently asked questions

How do I get the hex codes of the colors in a picture?
Choose the image and the palette appears below it, one swatch per color with its hex code, such as #1D4ED8. Each swatch has a button that copies its code, and the page confirms with Copied #1D4ED8.
Can I get the colors as RGB or HSL instead of hex?
Yes. Press RGB or HSL above the swatches and every code switches, and the copy buttons copy that form. #1D4ED8 becomes rgb(29, 78, 216) or hsl(224 76% 48%); HSL is rounded to whole degrees and percents.
Can I copy the whole palette as CSS variables or JSON?
Yes. Copy all as CSS variables gives a :root block with --color-1, --color-2 and so on, in the format you picked (HEX, RGB or HSL). Copy all as a list gives one code per line. Download JSON saves palette.json, with a name, hex, rgb and hsl for each color.
Why is white missing from my palette?
Leave out white and near-white is on by default, so pixels with every channel above 250 are skipped. Untick it and the palette is extracted again with white included. If every sampled pixel is near white, the page says so instead of showing an empty palette.
Are the swatches the most common colors in the image?
Not exactly. Median cut splits the colors into boxes and each swatch is the average of one box, so it can be a blend no single pixel has, and the order is the algorithm's, not a share of the image. The page gives no percentages.
Why did I get fewer colors than I asked for?
Median cut stops at the number you choose (4, 6, 8, 10 or 12) and gives fewer when the image has fewer distinct colors: the test image above gives 2 with white left out and 3 with it. Transparent pixels, with alpha below 125 out of 255, are always skipped. The page reads images your browser can decode, up to 25 MB, 10,000 px on a side and 40 megapixels.

Taking a starting palette from a photo

Take a starting palette from a photo, a product shot or a screenshot. Choose or drop an image and pick how many colors you want: 4, 6, 8, 10 (the default) or 12. The HEX, RGB and HSL buttons switch every code, so pure red reads #FF0000, rgb(255, 0, 0) or hsl(0 100% 50%). Copy all as CSS variables gives a :root block with --color-1 onward, Copy all as a list gives one code per line, and Download JSON saves palette.json with the hex, rgb and hsl of each color. Untick Leave out white and near-white when white belongs in the palette. The image is read in your browser and is not uploaded.

How the colors are chosen

The palette comes from median cut. The sampled pixels start in one box, which is split across its widest channel (red, green or blue) near the median pixel, again and again; each final box is averaged into one swatch.

In a Web Worker the image is copied at most 600 px on the long side, and about one pixel in ten of each row is sampled, with the starting column shifted from row to row (every pixel below 10,000 pixels in all). Pixels with alpha below 125 are always skipped, and pixels with every channel above 250 are skipped while the white option is on. The rest go to median cut (the MMCQ implementation in @lokesh.dhakar/quantize) for at most the chosen number of colors.

Example: a 100 x 100 image whose top 20 rows are white and whose lower part is half #1D4ED8 and half #F59E0B is sampled at every 2nd pixel of each row: 5,000 pixels, 1,000 of them near white. With white left out the palette is #1D4ED8 and #F59E0B; with it included it is #FFFFFF, #1D4ED8 and #F59E0B.

Limits: files up to 25 MB, images up to 10,000 px on a side and 40 megapixels; a run is stopped after 30 seconds.

Related Tools

View all tools
Image

Image Resizer

Resize an image to exact pixels, a percent, or cm, mm or inches at a DPI, with the aspect ratio locked or free, and save PNG, JPEG or WebP under a KB target.

Image

Image Cropper

Crop an image to 1:1, 4:5, 16:9, 9:16, golden or a custom ratio, type exact pixels or rotate it, and save PNG, JPEG or WebP at full size, with no scaling.

Image

Aspect Ratio Calculator

Find the aspect ratio of a size in pixels, such as 1920 × 1080 = 16:9, resize while keeping it, or get the missing side from a ratio like 21:9.

Image

Image Filters

Set brightness, contrast, grayscale, sepia, saturation, hue, invert and blur, or pick a look, then save as PNG, JPEG or WebP. Works in Chrome, Edge and Firefox.

Image

Favicon Generator

Turn an image or a letter into favicon.ico (16, 32 and 48 px) and PNG icons at 16, 32, 180, 192 and 512 px, with the link tags and a site.webmanifest.

Media

Exif Reader

Exif viewer for JPEG, PNG, WebP, TIFF, HEIC and AVIF: camera, lens, exposure, GPS in decimal degrees, IPTC and XMP captions, and a copy without metadata.