← All Tools

Color Palette Generator

Extract dominant colors from images or generate harmonious color palettes

Ad 728x90

Drop an image here or click to upload

PNG, JPG, GIF, WebP supported

Upload an image to extract its dominant colors using k-means clustering. You can adjust the number of colors from 3 to 10.

Extract & Generate Color Palettes from Images

Upload any image and instantly extract its dominant colors using advanced k-means clustering. Or generate harmonious color palettes from a base color using complementary, analogous, triadic, split-complementary, and monochromatic color theory rules. Perfect for designers, developers, and brand identity work.

Export your palettes in multiple formats: CSS custom properties, Tailwind CSS config, SCSS variables, or raw JSON. Copy individual color codes in HEX, RGB, or HSL format with a single click. The visual preview helps you see how colors work together before committing to a palette.

Whether you are building a website, designing a logo, or creating marketing materials, consistent color palettes are essential. This tool eliminates guesswork and ensures your colors are mathematically harmonious. All processing happens in your browser — your images are never uploaded.

Frequently Asked Questions

How does the color extraction work?
The tool uses k-means clustering, a well-known machine learning algorithm, to analyze the pixels in your image and group them into dominant color clusters. It samples up to 5,000 pixels, then iteratively refines cluster centers to find the most representative colors. You can adjust the number of extracted colors from 3 to 10 using the slider.
What are color harmony types?
Color harmony refers to pleasing combinations of colors based on their positions on the color wheel. Complementary colors sit opposite each other (high contrast), analogous colors are neighbors (natural and calming), triadic colors are evenly spaced at 120 degrees (vibrant), and monochromatic uses different lightness levels of one hue (cohesive and elegant). Each harmony type creates a distinct mood.
What export formats are supported?
You can export your palette in four formats: CSS custom properties (ready to paste into a stylesheet), a Tailwind CSS config object (drop into your tailwind.config.js), SCSS variables (for Sass projects), or a JSON object that includes hex, RGB, and HSL values for every color (great for design tokens or JavaScript usage).
What image formats are supported?
The tool supports PNG, JPG, GIF, and WebP images. Images are processed entirely in your browser using a canvas element, so your files are never uploaded to a server. Large images are automatically scaled down to 300px for faster processing without affecting color accuracy.
How do I copy a color code?
Click on any color swatch to copy its hex code to your clipboard. A brief confirmation will appear on the swatch. You can also use the "Copy Code" button in the Export section to copy the entire palette in your selected format.
Can I adjust the extracted colors?
You can change the number of extracted colors (3 to 10) using the slider. The image is re-analyzed in real time when you move the slider. For more control over individual colors, try the Generate tab where you can pick a seed color and choose a harmony type.