Color palette from image
Extract a color palette from any image, free and in your browser with no upload. Get 2 to 16 dominant colors as hex, RGB and HSL, and copy the set as CSS variables or a Tailwind block.
Click a swatch to copy it. Copy the set as CSS custom properties.
In detail
Palette extracts the dominant colors from an image using median cut and gives you between two and sixteen of them as hex, RGB and HSL. It only reads the image and writes no file back. Sampling runs on a copy no larger than 320 pixels on its long edge, made without smoothing, so a 24-megapixel photo costs the same as a thumbnail and a flat graphic keeps its exact colors rather than blended ones.
The same image and the same count always give the same palette. Click a swatch to copy its hex, or copy the whole set as CSS custom properties or a Tailwind colors block.
Color palette from image at a glance
- Input
- JPG, PNG, WebP, AVIF, HEIC, GIF (first frame), BMP, TIFF, SVG and other image formats
- Output
- Hex, RGB and HSL values, CSS custom properties or a Tailwind block, copied rather than saved
- What it does
- 2 to 16 dominant colors
- Median cut, with repeatable results
- Hex, RGB and HSL
- Copy as CSS custom properties
- Copy as a Tailwind colors block
- Who it is for
- Designers and developers building a color scheme from a photo, a logo or a brand image.
- Limits
- An image with fewer distinct colors returns fewer swatches.
- Each swatch is an average of a group of colors, not a single pixel.
- Privacy
- Runs entirely in your browser: the file is never uploaded, and nothing is kept after you close the tab.
How to extract a color palette from an image
- Drop an image One file. It is decoded in the tab and a sampling copy is drawn at no more than 320 pixels on its long edge, with image smoothing turned off.
- Choose how many colors Drag the slider between two and sixteen. The set is recalculated as you drag, and it is deterministic: the same image and the same number give the same palette every time.
- Copy what you need Click any swatch to copy its hex. The two buttons copy the whole set as CSS custom properties, numbered --color-1 upward, or as a Tailwind colors block ready to paste into tailwind.config.js.
Color palette from image: common questions
How are the colors chosen?
By median cut. Every distinct color in the sample starts in one box, the box with the widest single channel is split at that channel's weighted median until there are as many boxes as you asked for, and each box is then averaged down to one color. The results come back most common first, and fully transparent pixels are skipped so they cannot drag an average toward black.
Why did I get fewer colors than I asked for?
Because the image holds fewer distinct colors than that. A two-color logo cannot yield six, so the tool returns what is really there and tells you rather than inventing shades. It samples at most 32,768 pixels, evenly stepped through the image, so two runs over the same file walk the same pixels.
Is each swatch a real pixel from the image?
Each swatch is the weighted average of a group of colors from the image, so it is representative rather than a literal pixel. The downscale before sampling uses nearest-neighbor instead of smoothing, which is what stops the tool inventing colors that appear in no pixel of the original.