ThumbCraftedTry Free Editor
Free · Private · No Upload

Get the Color Palette from Any Image

Dominant colors, hex codes, and which ones survive being shrunk.

Drop an image to pull its dominant colors, click any pixel to sample it exactly, and copy the hex codes. Every color is also checked for whether text in it stays readable at feed size, which is the part most palette tools skip.

Drop or click to upload

Drag & drop or paste from clipboard

JPG, PNG, WebP — 25MB max

100% private No sign-up Copy any hex

Click anywhere on the image to sample that exact pixel.

Text legibility on each color

Picking colors that still work at thumbnail size

Pulling hex codes out of an image is the easy half. The half that decides whether a thumbnail works is which of those colors you can actually put text on, because a thumbnail is almost never viewed at full size. On a phone feed it is roughly the width of a thumb.

That is why this tool reports a contrast ratio next to every swatch instead of just handing you a grid of pretty squares. The ratio is the standard WCAG measure: it compares the relative luminance of two colors and returns a number from 1 (identical) to 21 (pure black on pure white).

What the numbers mean in practice

RatioVerdictWhat it means for a thumbnail
7.0 and aboveStrongReadable at any size, including a small phone feed tile. This is where thumbnail text should live.
4.5 to 7.0PassesFine for body text at normal sizes. For thumbnail text it is workable, but add a stroke or shadow if the text is thin.
3.0 to 4.5Large text onlyOnly safe for big, heavy type. It will start to disappear as the image shrinks.
Below 3.0FailsDo not put text here without an outline or a solid backing shape behind it.

Using a palette to keep a channel consistent

Recognisability in a feed comes from repetition, and color is the fastest signal a viewer processes, well before they read the title. A practical approach:

  1. Pick two anchors, not eight. Take the strongest and second-strongest colors from a thumbnail you were happy with, and reuse those across everything. Eight-color palettes look impressive and read as noise.
  2. Choose one text color and never change it. Run it against your anchors here. If it clears 7.0 on both, you never have to think about legibility again.
  3. Keep one accent for emphasis only. A single high-contrast color used sparingly draws the eye. Used everywhere, it stops meaning anything.

Why the extracted colors are not exactly what you see

The palette comes from median-cut quantisation: the tool takes every sampled pixel, repeatedly splits the color space along whichever axis has the widest spread, and averages what lands in each bucket. It produces the colors that best represent the whole image, which is not the same as the most eye-catching one.

A small, brilliant highlight can be visually dominant while occupying a fraction of a percent of the pixels, so it will not appear in a six-color palette. When you want that specific color, click it directly on the image; the eyedropper reads the exact pixel rather than an average. The percentage next to each swatch tells you how much of the image that color actually covers.

Once you have your colors, the thumbnail contrast checker tests a finished thumbnail as a whole, and the editor lets you apply the hex codes to text and shapes directly.

Palette Questions

Is my image uploaded anywhere?
No. The image is drawn to a canvas in your browser and the pixels are read locally. Nothing is sent to a server, which is why it works with no account and no queue.
How do I get the exact color of one spot?
Click that spot on the image. The eyedropper reads the exact pixel you clicked and shows its hex and RGB values, which you can copy. The palette swatches are averages across the whole image, so they will not match a single pixel exactly.
Why is a color I can clearly see missing from the palette?
Because the palette represents the image by area, not by how much a color stands out. A small bright highlight can dominate visually while covering a fraction of a percent of the pixels. Raise the color count, or click the color directly to sample it.
What does the contrast number next to each swatch mean?
It is the WCAG contrast ratio between that color and the better of white or black text, on a scale from 1 to 21. Above 7 is readable at any size. Between 4.5 and 7 is fine for normal text. Below 3 needs an outline or a backing shape behind the text.
Can I export the palette?
Yes, three ways: copy all the hex codes as plain text, copy them as CSS custom properties ready to paste into a stylesheet, or download the palette as a PNG strip with the hex codes labelled on it.
How many colors should I extract?
Five or six is usually the sweet spot for seeing what an image is built from. Go lower, to three, when you want the true anchors for branding. Go higher, to ten or twelve, when you are analysing a complex illustration.
Does it work on mobile?
Yes. Tap the image to sample a pixel and tap any swatch to copy its hex code to the clipboard.

Continue crafting

Keep going without re-uploading — your image carries over to the next tool automatically.

  1. 1EditAdd text, effects, or a fresh background