Dominant Color Analyzer
Extract the dominant colors from any image using k-means++ clustering. Adjust the number of colors, click any swatch to copy its HEX code, and export the full palette as CSS variables, Tailwind config, or JSON.
3,500+ palettes extracted
Drag & drop a file here, Ctrl+V to paste, oror
K-Means++ Clustering
Smart initialization ensures representative color clusters every time. Adjust from 2 to 12 colors and re-analyze instantly to find the right level of detail for your design work.
Developer-Ready Export
Export palettes as CSS custom properties, Tailwind config objects, HEX codes, RGB values, HSL values, or full JSON with color names and percentages. Copy or download with one click.
Visual Palette
See the proportional color bar, named swatches with coverage percentages, and click any color to copy its HEX code. Download the palette as a PNG swatch strip for Figma or presentations.
How does dominant color extraction work?
This tool uses k-means++ clustering to group similar pixels into representative color clusters. Unlike simple histogram peaks, k-means finds the actual center of each color group in 3D RGB space, producing perceptually accurate dominant colors. The "++" initialization ensures well-separated starting points, avoiding the random-seed instability of basic k-means. For a simpler palette view without clustering control, the Color Palette tool offers quick extraction. For full RGB distribution analysis, try the Histogram Analyzer.
Exporting palettes for design and development
Extracted palettes export in six formats: HEX for design tools, RGB and HSL for CSS, CSS custom properties (:root variables) for theming, Tailwind config objects for utility-first frameworks, and JSON with color names and percentages for programmatic use. The CSS variables export drops directly into a stylesheet; the Tailwind export pastes into tailwind.config.js. For picking individual pixel colors from specific areas, the Color Picker offers eyedropper-level precision. To check color accessibility, run pairs through the Contrast Checker.
Dominant colors vs. color palette
The existing Color Palette tool extracts a fixed palette quickly. This Dominant Color Analyzer adds adjustable cluster count (2-12), re-analysis without re-upload, proportional coverage percentages, color naming, and multi-format export. Use the palette tool for quick color grabs; use this analyzer for design system work, brand color extraction, and development integration. For visualizing the full color distribution in 3D space, the Color Space Viewer plots every pixel as an RGB scatter point.
Privacy and browser-based processing
All color analysis runs in your browser — the image is downsampled locally, pixels are clustered via JavaScript, and the palette is rendered on a Canvas element. No image data leaves your device. This is important when analyzing proprietary brand imagery or unreleased product photos. The same client-side architecture powers all 76 Scanly tools, from the Image Compressor to the Image Encryption tool. Explore the full set at Scanly's toolkit.
Extracting dominant colors is a core step in design system creation. Photograph a client's existing brand materials — business cards, storefronts, packaging — and extract the actual colors they use, even if they cannot provide exact hex values. Interior designers photograph rooms and extract wall, furniture, and accent colors for paint matching or mood board assembly. Fashion stylists analyze outfit photos to identify complementary color schemes. The adjustable cluster count (2-12) lets you control granularity — fewer clusters for broad palette strokes, more for nuanced color breakdowns.
The six export formats serve different parts of the design-to-development pipeline. CSS custom properties (:root variables) drop directly into a stylesheet for web theming. Tailwind config objects paste into tailwind.config.js to create utility classes from extracted colors. JSON with color names and percentages feeds into design tokens, style guides, or programmatic tools. HEX and RGB formats work with any design application from Figma to Photoshop.
For a complete color analysis workflow, start here to extract the dominant palette, then apply the extracted colors as a watermark overlay with the Image Watermark tool, verify your palette works at social media dimensions with the Social Media Resizer, and test how color grading shifts the overall palette using the Image Filters tool. Learn more in our articles on extracting color palettes and color picker guide.