HexaCalc
All tools
Pick Hex color pickerColor picker from imagePalette from imageCamera color identifierScreen color picker
Create Palette generatorColor wheelComplementary colorsTriadic colorsMonochromatic schemeColor mixerBrownBlueGreenPurplePinkOrangeGrayColor matcherGradient generatorTailwind color generatorShades and tintsRandom color generatorPaint color visualizerWebsite color schemesColor mixing chart
Check Contrast checkerColor blindness simulatorColor blind testTypes of color blindnessHue test
Convert HEX to RGBRGB to HEXRGB to CMYKCMYK to RGBHEX to CMYKHEX to HSLColor converterColor temperatureColor name finder
Personal color Color analysisSkin tone chartSeasonal color quizWinterAutumnSpringLight SpringTrue SpringBright SpringLight SummerTrue SummerSoft SummerSoft AutumnTrue AutumnDeep AutumnDeep WinterTrue WinterBright Winter
Color families Color codesBlueGreenSage greenMauveRedPinkPurplePastelNeutralDarkGoldGrayMint greenLight greenLight purpleLime greenPastel pinkNeonPastel greenPastel yellowPeachCrimsonCool colorsBurnt orangeOrangeGreigeBright colorsSpring colors
Hex math Hex calculatorHex to decimalDecimal to hexHex to binaryBinary to hexHex to textText to hex
More tools Minecraft color codesColor gameResistor color codeImage color changerColor by numberGrayscale image
↑ ↓ to moveEnter to openEsc to close

Palette from image

Drop in a photo and HexaCalc groups its pixels into the handful of colors that cover the most area. Change the count or the mood filter and the palette is recalculated on your device.

Upload, drop or paste an image

Drag a file here, or paste a screenshot with Ctrl/⌘ + V. JPG, PNG, WebP, GIF, AVIF and (in Safari) HEIC. Nothing is uploaded.

How the colors are found

A photo of a few million pixels usually contains tens of thousands of distinct RGB values, but your eye reads it as a handful of colors: the sky, the sand, a red umbrella. The tool finds those groups with k-means clustering:

  1. The image is shrunk to about 200 pixels on its long side. That keeps every proportion intact and makes the math fast enough for a phone.
  2. Every remaining pixel is converted to OKLab, a color space built so that equal distances look like roughly equal differences.
  3. The tool picks starting centers spread across the image's colors (the "k-means++" method), assigns every pixel to its nearest center, moves each center to the average of its pixels, and repeats until nothing changes.
  4. Each final center becomes a swatch, and the share of pixels it gathered becomes its percentage.

Clustering in OKLab rather than RGB matters. In RGB, dark colors sit close together numerically even when they look very different, so dark images tend to come back as muddy near-duplicates. OKLab spreads them out the way you see them.

The starting points use a fixed random seed, so the same image and settings always give the same palette.

Choosing how many colors

Use the − and + buttons to ask for anything from 3 to 16 colors.

  • 3–5 gives a poster-style summary, good for a brand mood board or a slide theme.
  • 6–8 catches the main subject plus its shadows and highlights.
  • 10–16 picks up small accents, such as a yellow sign in a street scene. Some swatches will be close variations of each other.

Swatches covering less than 1% of the image are still shown, because small accents are often exactly the colors designers want.

The mood filter

The mood buttons decide which pixels take part in clustering:

MoodPixels used
AllEvery pixel
VividChroma above 0.09 and not too dark
MutedLow chroma, excluding near-black and near-white
LightOKLab lightness above 0.72
DarkOKLab lightness below 0.48

Vivid is handy when a photo is mostly gray sky or pavement, which would otherwise take over the palette. If too few pixels match a mood, the whole image is used and the tool tells you.

Sorting and exporting

Sort by how much of the image a color covers (the default), by hue around the color wheel with grays at the end, or from light to dark. The bar above the list shows each color's share at a glance.

Click any HEX code to copy it. The export panel turns the palette into CSS custom properties, Tailwind v3 or v4 config, SCSS variables, JSON, W3C design tokens, SVG, a plain HEX list or a PNG swatch card. The color names in exports come from HexaCalc's list of about 4,900 hand-picked names, so --color-1 can become something you will recognize later.

Getting better palettes

  • Crop first. A product shot on a white table is mostly white table. Cropping to the subject gives a more useful palette than adding more colors.
  • Watch compression. Heavily compressed JPEGs add blocky color noise. The clustering mostly averages it away, but a cleaner source gives cleaner swatches.
  • Check text contrast. Colors pulled from a photo rarely meet text contrast guidelines by luck. Run your text and background pair through the contrast checker.

Privacy

Your image is decoded by your own browser and never uploaded. Close the tab and it is gone.

To pick one exact pixel rather than an overall palette, use the color picker from image. To grow a palette from one extracted color, the color palette generator and website color schemes tools build matching sets. And to check that the palette survives color blindness, paste it into the color blindness simulator.

FAQ

Why is the most common color not the most noticeable one?

Percentages count area, not attention. A small red flower can catch every eye while covering 2% of the frame. Switch the sort to hue, or use the Vivid mood, to bring such accents forward.

Why does the same photo give slightly different colors in another tool?

Each tool shrinks images differently, clusters in a different color space and starts from different points. Differences of a few units in each channel are normal and rarely visible.

Can I extract colors from a transparent PNG?

Yes. Pixels that are more than half transparent are ignored, so the empty background does not show up as a swatch.