Color Palette from Image

Turn any image into a color palette

Great palettes often start with a photo: a landscape, a product shot, a mood board or a client’s existing logo. This tool finds the colors that best represent an image and hands them to you as ready-to-use code. Designers use it to build brand palettes from photography, developers use it to match a website to a hero image, and marketers use it to keep social graphics consistent with product photos.

How to extract colors from an image

1. Select or drag in an image — JPG, PNG, WebP or GIF.
2. Choose how many colors you want, from 3 to 10.
3. Check the bar above the swatches: each color’s width shows how much of the image it covers.
4. Copy any color as HEX or RGB with one click.
5. Pick an export format — CSS variables, SCSS, Tailwind or JSON — set a name prefix, and copy or download the code.

How the palette is calculated

The image is first scaled down to about 160 pixels on its longest side, which keeps the analysis fast without changing its overall colors. The remaining pixels are grouped with k-means clustering: the algorithm picks starting colors spread across the image (the k-means++ method), assigns every pixel to its nearest color, moves each color to the average of its pixels, and repeats until nothing changes. The final averages are your palette, sorted from most to least common.

Transparent pixels are ignored, so a logo saved on a transparent background returns its actual brand colors. The starting point is fixed, so the same image always produces the same palette.

Tips for better palettes

• Start small, then add colors. Five or six colors usually capture a photo; add more to reveal accents.
• Crop first if you only care about part of an image, such as a product rather than its background.
• Check contrast before using palette colors for text; photo colors are often mid-tones that are hard to read on white.
• Name colors by role (primary, accent, surface) rather than by appearance once you settle on a palette.

Using the exported code

CSS variables go in a :root block and can be used anywhere with var(--color-1). The Tailwind export produces an object you can paste under theme.extend.colors, so classes like bg-color-100 become available (or bg-brand-100 if you set the prefix to “brand”). JSON includes the name, HEX, RGB and coverage of each color for design tools or scripts.

Need a color in another format, such as HSL or CMYK? Paste it into the Color Converter. Turning the palette into site assets? Create icons with the Favicon Generator and clean up vector logos with the SVG Optimizer.