AI Color Palette Generator - Extract Colors from Images

Drop an image here or click to browse - you can also paste with Ctrl+V JPGPNGWEBPAVIFGIFSVG

Try a sample: More samples

Palette 5 colors

A starter palette - drop an image to make your own.

Steel Blue Covers 34% of the image

Send this color to

Color Wheel Contrast Checker Gradient Generator CSS Color Editor

Colors that go with it - click one to add it

Number of colors

Five colors - the classic palette size.

Skip white and blackOff - backgrounds and shadows count too OFF

:root {}

PNG palette card · 5 colorsMeasuring the file size...

How to get a color palette from an image

Add an image. Drop a photo, logo or screenshot, paste it with Ctrl+V or pick a sample. Nothing is uploaded.

Tune the palette. Choose how many colors you want and a style - Balanced, Dominant, Vibrant or Muted. Click the photo to add any exact pixel color.

Lock and regenerate. Lock the colors you love and press Regenerate to swap the others for the next best colors in the image.

Copy or download. Copy CSS, SCSS, Tailwind or JSON code, or download the palette as PNG, SVG, ASE or GPL.

No image yet? Switch to From a color, type your brand color and the tool builds a matching palette around it.

Which style should I pick?

Balanced

The big areas plus the small accents that catch your eye. A good start for almost any image.

Dominant

Strictly by area - what you would see if you squinted. Great for backgrounds and brand matching.

Vibrant

Saturated, punchy colors. Use them for buttons, highlights and calls to action.

Muted

Soft, dusty and neutral tones. Perfect for calm layouts, text and large surfaces.

Turn a palette into a real design

Use the 60-30-10 rule. One color for most surfaces, a second for supporting areas and a third as a small accent.

Check your text. The Aa hint on each swatch shows the best text color - test any pair in the Color Contrast Checker.

Blend two colors. Send two palette colors to the Gradient Generator for a matching background.

Fine-tune a color. Explore tints, shades and harmonies on the Color Wheel, or convert between formats in the CSS Color Editor.

Recolor an image. Swap a color in a photo or logo for one from your palette with the Image Color Replacer.

Match your favicon. Use your new colors in the Icon Maker and turn the result into a site icon with the Favicon Generator.

Export formats

Format	Best for	Opens in
CSS / SCSS	Websites - variables you reuse everywhere	Any code editor
Tailwind	Tailwind CSS projects	tailwind.config.js
JSON	Apps, scripts and design tokens	Any code editor
PNG / SVG	Sharing, mood boards, client previews	Browsers, Figma, Canva
ASE	Adobe swatches	Photoshop, Illustrator, InDesign
GPL	Open-source graphics apps	GIMP, Inkscape, Krita

Want a lighter palette card? Shrink the PNG with PNG to WEBP.

Frequently Asked Questions

Drop a photo, logo or screenshot on the page, paste it with Ctrl+V or try one of the samples. The palette appears straight away.

Change the number of colors, lock the ones you like and press Regenerate to shuffle the rest. Then copy the code or download the palette.

The tool uses k-means clustering, a classic machine-learning method. It groups the pixels of your image into clusters of similar colors, measured in the OKLab color space so that "similar" matches what your eyes see.

The center of each cluster becomes a palette color, and the percentage under each swatch shows how much of the image it covers. Need the code of one exact pixel instead? Use the Image Color Picker.

Dominant picks the colors that cover the most area. Balanced covers the main areas too, but gives small, colorful accents a fair chance.

Vibrant goes after saturated, eye-catching colors, and Muted after soft, dusty and neutral tones.

Click the lock icon on any swatch, then press Regenerate. Locked colors stay where they are and the others are replaced with the next best colors from your image.

Editing a color by hand locks it automatically, so your change is never lost.

Copy CSS variables, SCSS, a Tailwind config or JSON for code. Download PNG or SVG for a palette card you can share.

ASE opens in Photoshop, Illustrator and InDesign, and GPL works in GIMP, Inkscape and Krita.

Every swatch shows Aa in the text color that reads best on it, with its contrast ratio. Select a swatch to see the ratio against both white and black and whether it passes WCAG AA or AAA.

For any two colors, use the Color Contrast Checker - each swatch has a one-click link to it.

No. The image is read and analyzed in your browser and never leaves your device. The palettes you save are kept in this browser only - see our Privacy Policy.

Yes. Colors cannot be owned, so the palettes are free to use in personal and commercial work with no attribution needed.

Just make sure you have the right to use the image itself if you publish it.