Color palette from image in HEX and RGB
Get a color palette from an image in your browser. Choose a picture and set how many colors you want. The tool reads every pixel and groups the colors into swatches, each with a HEX code, an RGB value and its share of the image. Copy the codes or download them as CSS or JSON.
3. Your color palette
Extract a palette to see color values and downloads.
How to get a color palette from an image
Select Choose image, or drop an image file on the first panel. The preview shows the decoded picture, and the line below the button gives its name, size in pixels and file size. Set Colors to the most swatches you want; it starts at 6. Pick a Transparency option, then select Extract palette.
The swatches appear under Your color palette, largest share first, each with its HEX code, RGB value and percentage. A summary line above them says how many colors you got and how they were found. Changing a setting clears the old result until you extract again. Reset clears the image and returns to 6 colors and Weight visible colors.
- Select Choose image or drop an image.
- Set Colors and Transparency.
- Select Extract palette.
- Select Copy HEX, Download JSON or Download CSS.
How the tool picks the colors
When the image holds no more distinct colors than the Colors number, the palette lists every one of them exactly. Otherwise the tool sorts all pixels into 32,768 bins, 32 levels each of red, green and blue. It then splits them into groups by weighted median cut until it reaches your number. Each swatch is the rounded average of its group, which is how the tool gets a color scheme from an image with thousands of shades.
Take four pixels: three #FF0000 and one #FA0505. With Colors at 2 or more, you get both, at 75% and 25%. With Colors at 1, they merge into #FE0101 at 100%, a color that neither pixel has.
Every decoded pixel counts, and the tool samples no subset. Only the preview is shrunk for display. The summary line says whether the result holds exact colors or grouped representative colors.
Transparent pixels and backgrounds
The Transparency setting decides how see-through pixels count. Weight visible colors skips fully transparent pixels and counts every other pixel by its opacity. Composite on white and Composite on black first blend each pixel onto that background, then count all pixels equally.
Take one opaque blue pixel and one red pixel at alpha 128. Weight visible colors gives #0000FF at 66.6% and #FF0000 at 33.4%, since the half-clear red counts about half. Composite on white turns the red into #FF7F7F, and Composite on black turns it into #800000, each at 50%.
Weight visible colors suits a logo on a transparent background, because the empty area does not become a white or black swatch. An image that is transparent everywhere has no visible colors under that option. The page then asks you to choose a background, and the palette is that background color.
What you can copy and download
Copy HEX copies the codes as plain text, one per line, in the order of the swatches. If the browser blocks the clipboard, the page selects the codes in a text box so you can copy them yourself. Download CSS saves numbered custom properties in a :root block, from --palette-1 for the largest share onward, ready to paste into a stylesheet.
Download JSON saves each swatch's HEX code, RGB value and full-precision percentage. It adds the image width and height, the requested number of colors, the transparency option and whether the colors are exact. The files take your image's name, so photo.jpg gives photo-palette.css and photo-palette.json.
Neither file holds the image or its metadata. The page rounds each percentage to one decimal place, so the shares on screen may not add up to exactly 100%. The JSON keeps the unrounded values.
Limits
The tool reads one image at a time. A new file replaces the current one, and the page has no batch mode and no way to merge palettes from several pictures. It reports the colors in your image; it does not name them, match them to paint or print color systems, or invent new color schemes.
An animated image gives one frame, and a multipage TIFF gives one page. Colors are read in sRGB after the file is decoded, so an embedded color profile or a wide-gamut or HDR image can shift the values. Colors takes any whole number from 1 to 32,768, the number of bins.
The tool sets no file-size limit. A very large image can run out of browser memory, and the page then shows an error. If that happens during extraction, the image and settings stay loaded, so you can try again. Cancel & clear stops the work and releases the image.
Questions
How can I extract a color palette from an image?
Open the image with Choose image, leave Colors at 6 or type another number, and select Extract palette. The swatches show each color's HEX code, RGB value and share. Copy HEX puts the codes on your clipboard, and Download CSS or Download JSON saves them as a file for your project.
How can I extract all colors from an image?
Set Colors to a number at least as large as the count of distinct colors in the image, up to 32,768. If the image has that many colors or fewer, every decoded color is listed exactly with its share. With more distinct colors than that, the tool groups similar colors and shows their averages.
Can I find the HEX code of each color in a picture?
Yes. Each swatch shows a six-digit HEX code such as #FF0000 and the same color as an RGB value. Copy HEX copies all the codes at once, one per line. To read the exact color of one spot you choose, use a pixel color picker instead of a palette.
Why did I get fewer colors than I asked for?
The Colors number is an upper limit. A single-color image gives one swatch, and an image with three distinct colors gives three, however high you set Colors. The summary line shows the result as a count of the maximum, for example 2 of up to 6 colors.
Which images can I open?
JPEG, PNG, WebP and other formats your browser decodes open directly. The tool also has its own decoders for TIFF, AVIF and SVG. An SVG runs no scripts and loads no external files, so missing fonts or linked images can change its look. A damaged or unsupported file shows an error.
Does my image leave this device?
No. Decoding the image and counting its colors both run in your browser on this device. The tool does not upload, log or store the image. Cancel & clear, Reset, choosing another image and leaving the page each release the image and its downloads from the page.