Figma plugin
Search SketchValley illustrations and drop them straight into your Figma frames.
- Search the whole library inside Figma
- Inserts editable vectors, not flat images
- Free, no account needed
Color Palette from Image — Extract Colors in One Click
Extract a colour palette from any photo, illustration or screenshot and get the exact HEX codes. Drag the pickers to the exact spot you want, switch moods from vibrant to muted, get tints and shades and contrast checks, then export to CSS, Tailwind, Adobe ASE and more.
100% private — images never leave your browser
Or try one of our illustrations
How to get a color palette from an image
1
Add an image
Drop or paste any photo, illustration, logo or UI screenshot. It stays on your device.
2
Fine-tune the palette
Pick a mood and how many colors you want. Drag a picker to any spot on the image, click the image to add a color, lock favorites and drag swatches to reorder.
3
Copy or export
Copy HEX, RGB, HSL or OKLCH codes, grab a tints-and-shades scale, then export a palette image, CSS variables, a Tailwind config or Adobe swatches.
Built for designers and developers
Pick exactlyDrag pickers with a magnifier to the precise pixel, or let the tool choose.
Five moodsBalanced, Vibrant, Bright, Muted and Deep — very different palettes from one image.
See what dominatesEach color shows how much of the image it covers.
Tints & shadesAn even 50–950 scale for every color, ready for design systems.
Accessible pairsWCAG contrast for every color and a list of readable combinations.
Export anywherePNG, CSS, SCSS, Tailwind, JSON, ASE for Adobe apps, GPL and SVG.
Frequently asked questions
How do I get a color palette from an image?
Add any photo, illustration or screenshot. The tool picks the most important colors automatically and shows where each one comes from. Drag a picker on the image to fine-tune a color, click the image to add one, then copy the codes or export the palette.
What do the moods do?
Balanced picks the colors that cover the most of your image. Vibrant favors the most saturated colors, Bright the light and lively ones, Muted the soft and dusty ones, and Deep the dark, rich tones — like the moods in Adobe Color.
Which formats can I export?
A palette image (PNG), CSS variables, SCSS, a Tailwind config, JSON, Adobe Swatch Exchange (.ase) for Photoshop and Illustrator, a GIMP/Inkscape palette (.gpl) and SVG swatches. You can also copy every HEX code at once.
Can I get tints and shades of a color?
Yes. Select any color to see an 11-step scale from very light (50) to very dark (950), generated in the perceptual OKLCH color space so steps look even. Click any step to copy it.
Does it check color contrast?
Yes. Every color shows its contrast ratio against white and black text with WCAG AA and AAA ratings, and the tool lists which pairs in your palette are readable together.
Is my image uploaded?
No. Everything happens in your browser — your image never leaves your device.
How do I extract colors from a photo?
Drop or paste the photo above. The main colors appear at once with their HEX, RGB and HSL codes and how much of the photo each covers. Click anywhere on the photo to grab that exact pixel, or drag a picker with the magnifier for precision.
Can I get the HEX code of one color in an image?
Yes. Click the spot in the image you want, or drag one of the pickers onto it, and copy its HEX code with one click. RGB, HSL and OKLCH are there too.
Is this color palette generator from an image free?
Yes — completely free, with no signup and no limits. It works on phones too: open the page, choose a photo from your gallery and copy the colors.
What can I use a palette from an image for?
Brand colors pulled from a logo or product photo, a matching theme for a website or slide deck, colors for an illustration, or a mood board — then export straight to CSS, Tailwind, Figma-friendly SVG swatches or Adobe .ase.
How many colors can I extract?
From 2 to 12. Lock any colors you like and they stay put while you change the count or mood.