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.
常见问题
图片调色板提取器
会话期间添加的自定义时区将保留，直到您删除它们或关闭标签页。目前未启用通过localStorage持久化。
检查前景色/背景色对的WCAG 2.1对比度，即时获取通过/失败结果。
Generate random single colors or harmony-aware palettes with HSL constraints, locked colors, export to CSS/HEX/RGB/HSL, and palette history.