Color Palette Extractor
Color Palette Extractor builds a color palette from any image by automatically pulling out its dominant colors. Upload a photo or design, and it analyzes the whole image to extract up to 12 colors, listing each one with its share (how much of the image that color covers).
Drag an image here
or
PNG / JPG / WebP / GIF / BMP / SVG supported (up to 20MB). .png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
Related Tools
Color Picker
Pick colors from an image and get the HEX, RGB, or HSL code. Zoom in with the loupe for pixel-level accuracy and export your palette. Free, no signup.
- Design & Color
- Productivity
Color Palette Generator
Free color palette generator. Pick one base color to generate complementary, analogous, triadic, and other color schemes from color theory. Export as CSS variables, Tailwind, SCSS, or JSON. Runs entirely in your browser.
- Generator
- Design & Color
Color Code Converter
Convert color codes between HEX, RGB, HSL, HSV, and OKLCH, with alpha and a CMYK reference. Copy any format in one click. Runs entirely in your browser.
- Converter
- Design & Color
Contrast Checker
Check color contrast against WCAG 2.1 / 2.2 AA and AAA, with passing-color suggestions, color-blindness simulation, and APCA. Runs entirely in your browser.
- Checker
- Design & Color
- Accessibility
CSS Gradient Generator
Free CSS gradient generator for linear, radial, and conic gradients. Adjust colors, angle, and alpha, then copy as CSS, Tailwind, or SCSS. Runs in your browser.
- Generator
- Development
- Design & Color
CSS Shadow Generator
CSS box shadow generator with live sliders. Stack layers, add inset, apply neumorphism and glow presets, export CSS or Tailwind. Runs entirely in your browser.
- Generator
- Design & Color
About Color Palette Extractor
Color Palette Extractor builds a color palette from any image by automatically pulling out its dominant colors. Upload a photo or design, and it analyzes the whole image to extract up to 12 colors, listing each one with its share (how much of the image that color covers).
Every color is available in HEX (#RRGGBB), RGB, and HSL, and you can copy any value with one click. Choose how many colors to extract (4–12), then export the whole palette as JSON, CSS variables, SCSS, or a Tailwind color config — ready to drop straight into your site or style guide. You can also pick an extraction mode — Dominant, Balanced, or Accent — to control how much small but vivid accent colors are preserved.
Unlike a color picker that reads a single pixel at a time, this tool generates the colors that best represent the overall balance of an image. Your uploaded image is never sent to a server — extraction runs entirely in your browser. Free, with no sign-up required.
How to use
- Drag and drop the image you want to analyze, or click to choose a file.
- The dominant colors are extracted from the whole image and shown as a palette with each color's share.
- Choose an extraction mode — Dominant, Balanced, or Accent — to control how much small accent colors are kept.
- Pick the number of colors (4–12) to re-extract the palette at that count.
- Switch the color code format between HEX, RGB, and HSL, and click any color to copy it.
- Use "Export palette" to copy the whole palette as JSON, CSS variables, SCSS, or Tailwind.
Use cases
- Web designers and front-end engineers choosing a color scheme from a photo or design — export the colors straight into CSS variables or a Tailwind config.
- UI/UX designers analyzing the color balance of a reference site or screenshot.
- Branding specialists pulling the key colors (base and accent) out of product photos or brand assets to build a color guide.
- Illustrators and photographers who want a quick read on the overall colors of an image.
- Anyone matching the colors of a deck or document to a reference image.
Notes
- Colors are computed with median-cut quantization. Changing the number of colors changes the resulting values and shares, even for the same image.
- Perceptually similar colors are merged, so the palette may show fewer colors than the number you selected.
- The extraction mode (Dominant / Balanced / Accent) controls the weighting: Accent keeps small but vivid colors, while Dominant favors colors that cover large areas.
- Images are scaled down internally before analysis to keep extraction fast, so the per-color share is an approximation.
- Colors are handled in the sRGB color space. Wide-gamut images (e.g. Display P3) are shown as their sRGB-converted values.
- Nearly transparent pixels are excluded from the extracted colors.
- To read a single pixel's color, use the Color Picker instead. This tool is for generating an image's representative colors.