How to use the Image Color Extractor
- Drop, paste or choose an image.
- Pick how many colors you want (2–20) and a palette style. The palette updates instantly.
- Drag across the image to use only that area, or click to add a specific pixel.
- Sort the swatches, click one to copy its code, and export the palette as CSS, SCSS, Tailwind, JSON, SVG or PNG.
Image Color Extractor features
- 2 to 20 colors, each with its share of the image
- Perceptual k-means clustering in OKLab for natural-looking palettes
- Dominant, vibrant, muted, light and dark palette styles
- Extract from a selected area, or click to add exact pixels
- Ignore transparent, near-white or near-black pixels
- Sort by dominance, hue, lightness or saturation
- Export as CSS variables, SCSS, Tailwind (v3 and v4), JSON, JS array, SVG or PNG
- Open the palette in the palette or gradient generator
Turn any image into a color palette
The image color extractor finds the main colors in a photo, illustration or screenshot and turns them into a palette you can use right away. Drop in a picture and you get between 2 and 20 swatches, each with its HEX code and the share of the image it covers. It is the quickest way to borrow the mood of a photograph for a website, a brand, a slide deck or a social media post.
Unlike picking colors one by one, the extractor looks at every part of the image at once, so it also catches colors you might overlook, such as the warm gray of a shadow or the muted green in a background.
How the dominant colors are found
The image is scaled down and its pixels are grouped by similarity with k-means clustering. The grouping happens in OKLab, a color space designed around human vision, so two colors that look alike end up in the same group even when their RGB numbers are quite different. Each group becomes one swatch, and its percentage tells you how much of the image it represents.
The result is deterministic: the same image with the same settings always gives the same palette, so you can come back later and get identical codes.
Palette styles
The most common colors are not always the most useful ones. A product photo on a white table is mostly white, for example. The Palette style setting changes what the extractor looks for:
| Style | What you get | Good for |
|---|---|---|
| Dominant | The colors that cover most of the image | Faithful summaries, placeholders, matching a photo |
| Vibrant | The most saturated, eye-catching colors | Accent and call-to-action colors |
| Muted | Soft, low-saturation colors | Backgrounds and calm, editorial designs |
| Light | The lightest colors in the image | Page backgrounds and cards |
| Dark | The deepest colors in the image | Text, footers and dark themes |
You can also ignore transparent pixels, near-white or near-black areas, which helps with logos, product shots on white backgrounds and photos with heavy shadows.
Pick colors from one part of the image
Sometimes only part of the picture matters, such as the subject of a portrait or a single product. Drag across the image to extract colors from that area only, or click anywhere to add that exact pixel to the palette. Turn on Show where colors are to see markers on the image for each swatch.
Export your palette
Sort the swatches by dominance, hue, lightness or saturation, then export them in the format you need:
- CSS custom properties such as
--color-1: #2B4C7E;for any website. - SCSS variables for Sass projects.
- Tailwind config for
tailwind.config.js, or Tailwind v4 @theme variables. - JSON or a JS array for apps and scripts.
- SVG or a PNG swatch image to share with clients or drop into a mood board.
To keep refining the colors, send the palette to the Color Palette Generator, where you can lock, adjust and save it, or turn it into a gradient with the CSS Gradient Generator.
Ideas for using an image palette
- Match a website or landing page to its hero photo so the whole page feels coherent.
- Create a brand palette from a photo that captures the feeling you want.
- Choose text and accent colors for a YouTube thumbnail, poster or Instagram post.
- Pick paint, fabric or decor colors from a room you love.
- Give data visualisations a palette that matches an accompanying image.
Before using extracted colors for text, check them with the Contrast Checker. Colors that look great in a photo do not always have enough contrast for reading. If you need one representative color instead of a palette, use Average Color of an Image, and for a single exact pixel use the Image Color Picker.
Private and fast
All the analysis runs in your browser. Your image is never uploaded, which makes the extractor safe for client photos and unreleased work. Your last image and settings are kept on your device, so the palette is still here when you return.
Image Color Extractor: frequently asked questions
How are the dominant colors chosen?
Pixels are grouped with k-means clustering in the OKLab color space. Each cluster becomes a swatch and its share of the image is shown as a percentage.
Why do I get slightly different colors each time?
The clustering starts from a deterministic seed, so the same image and settings always give the same palette. Changing the color count or filters changes the grouping.
Can I use the palette in Tailwind CSS?
Yes. Choose the Tailwind export to get a snippet for the colors section of your tailwind.config.js, or the CSS export for Tailwind v4 @theme variables.
Is there a size limit?
No hard limit. Large images are downscaled for analysis, which keeps it fast without changing the result in any meaningful way.
How do I get a color palette from a photo?
Drop the photo on this page. The main colors appear as swatches with their HEX codes. Choose how many colors you want, then copy them or export the palette.
How many colors should I extract?
Five or six is a good palette for most designs: a couple of background colors, a text color and one or two accents. Use more when you need a detailed summary of a complex image.
Why is my palette mostly white or gray?
Those colors cover most of the image. Turn on Ignore near-white or near-black, choose the Vibrant style, or drag across the subject to extract colors from that area only.