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 무료 회원가입 불필요

Color Palette from Image

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

도구를 불러오는 중…

이 도구에 대해

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.

사용 방법

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.

이 도구에 대해

사용 방법

자주 묻는 질문