How does k-means color extraction work?

The algorithm groups all pixels into k clusters by color similarity, then uses each cluster's average color as a palette swatch. It iterates until cluster centers stabilize.

What is the Adobe ASE format?

ASE (Adobe Swatch Exchange) is a binary format supported by Photoshop, Illustrator, and InDesign. Download the .ase file and open it in the Swatches panel.

How is contrast ratio calculated?

Using the WCAG 2.1 relative luminance formula. Ratios ≥ 4.5:1 pass AA for normal text; ≥ 3:1 pass AA for large text; ≥ 7:1 pass AAA.

Does my image get uploaded anywhere?

No. The image is processed entirely in your browser using the Canvas API. Nothing is sent to a server.

What color harmonies are detected?

Complementary (opposite hues), analogous (adjacent hues within 30°), triadic (120° apart), and split-complementary patterns are identified if present in the palette.

Design Gratuito Sem cadastro

Color Palette from Image

Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.

Carregando ferramenta…

Sobre esta ferramenta

Upload any image and extract its dominant color palette using k-means clustering — the same algorithm used by professional design tools. Choose 5, 8, 10, or 12 colors with the slider. Each extracted color is matched to the nearest named CSS color for easy reference. Export in four formats: CSS custom properties, Tailwind CSS config, Figma-compatible JSON, or Adobe ASE binary. The harmony analyzer checks whether your palette is complementary, analogous, triadic, or split-complementary. The built-in accessibility checker computes WCAG contrast ratios between all color pairs and flags which combinations pass AA or AAA standards.

Como usar

1 Click 'Upload Image' or drag-and-drop any JPG, PNG, WebP, or GIF.
2 Adjust the color count slider to 5, 8, 10, or 12 swatches.
3 Click 'Extract Palette' — results appear with hex codes and nearest CSS color names.
4 Choose an export format (CSS variables, Tailwind, Figma JSON, ASE) and click Download.
5 Review the Harmony Analysis and Contrast Accessibility panels below the palette.

Perguntas frequentes

Ferramentas relacionadas

Extrator de Paleta de Cores de Imagem

Faça upload de uma imagem e extraia suas cores dominantes como uma bela paleta.

Gerador de QR Code

Gere paletas de cores harmoniosas a partir de uma cor base usando regras de complementaridade, analogia, tríade e outras harmonias.

Verificador de Contraste de Cores

Verifique as taxas de contraste WCAG 2.1 para pares de cores de primeiro plano/fundo e obtenha resultados de aprovação/reprovação instantaneamente.

Random Color Generator

Generate random single colors or harmony-aware palettes with HSL constraints, locked colors, export to CSS/HEX/RGB/HSL, and palette history.