Palette from Image
Upload any photo and extract its dominant colors. Copy as HEX, CSS variables, or Tailwind config.
Drop an image here
or click to browse — JPG, PNG, WebP, GIF
How it works
Upload an image
Drop or pick any photo, screenshot, or logo — JPEG, PNG, WebP, or GIF.
Set the color count
Choose how many colors to extract — 5 or 6 works well for most use cases.
Copy or export
Click any swatch to copy its value, or export the palette as CSS variables or Tailwind config.
What people extract palettes for
Matching site colors to a hero image
Matching a website's color scheme to its hero image or a key product photo. If a particular image anchors the page design, pulling its dominant colors gives you a palette that is guaranteed to feel cohesive with the visual — because it literally came from it.
Identifying colors from a brand asset
Identifying a brand's colors from a logo screenshot or marketing asset. If you need to match colors from a client's existing materials or a reference design, uploading a screenshot and extracting the palette is faster than manually eyedropping pixels in a design tool.
Exporting palette from a mood board
Generating Tailwind config or CSS variables directly from a mood board image. The export options copy the palette into the formats your project uses — no reformatting needed before pasting.
Frequently asked questions
How does color extraction work?
The tool uses a median cut algorithm entirely in your browser. It samples pixels from your image, groups similar colors together, and averages each group to produce clean, distinct palette colors. Nothing is sent to any server.
What image formats are supported?
JPEG, PNG, WebP, and GIF are all supported. Any image your browser can display will work.
How do I use the colors in my project?
Click any swatch to copy its value in your chosen format (HEX, RGB, or HSL). Use the CSS Variables button to copy a ready-to-paste :root block, or Tailwind Config to get an extend.colors snippet for your config file.
Can I download the palette?
Yes — click Download PNG to save a horizontal color strip of your palette as a PNG image, ready to use in design tools like Figma or Photoshop.
How many colors does it extract?
You can extract between 2 and 12 colors. More colors capture finer gradients in the image; fewer give you only the most dominant tones. For brand matching or a design system, 5–6 colors is usually the practical sweet spot.
Why are some extracted colors different from what I can see in the image?
The extraction algorithm groups similar pixel values together and averages each group. Small elements like thin lines or fine details can be absorbed into larger color groups. The results reflect the colors that dominate by area, not necessarily the ones that stand out visually.
Can I use it with a logo that has a transparent background?
Yes. Transparent areas are treated as white during extraction, so they do not skew the palette. For logos on a colored background, the background color will appear as one of the dominant colors — which is useful if you are trying to match the full brand palette.