Color Palette Extractor
Drop an image, get its dominant colors. Export as HEX, RGB, HSL, CSS variables, Tailwind config or JSON. Powered by k-means clustering — runs entirely in your browser.
Drop an image, click to browse, or Ctrl/Cmd + V to paste
PNG, JPG, WebP, GIF — anything your browser can decode
From a photo to a complete brand palette in seconds
Designers, web developers and brand professionals constantly need to extract colors from reference images — a competitor's website, a mood-board photo, a screenshot, a logo, a piece of art. This tool does it instantly with k-means clustering, the same algorithm used by Adobe Color and similar professional tools.
工作原理
K-means is a classic clustering algorithm: it groups similar pixels together and finds the "center" (average color) of each group. We sample up to 20,000 pixels from your image (more than enough — visually indistinguishable from analyzing every pixel) and run k-means in RGB space to find the K most dominant clusters. The result is a palette sorted by frequency, so the first color is the one that occupies the most pixels.
为什么选择k-means而不是其他算法？
Popular alternatives like median-cut (used by ColorThief) and Vibrant.js have known issues: they sometimes return colors that are vivid rather than dominant, and their output can vary between runs. Our k-means implementation uses k-means++ seeding with a deterministic golden-ratio fraction, which makes runs reproducible (same image → same palette) and converges to truly dominant clusters.
导出格式
- HEX list — paste into any design tool.
- RGB / HSL — for code that needs numeric channels.
- CSS variables — drop into
:root { }and reference withvar(--color-1). - Tailwind config — generates a block ready to paste into
tailwind.config.jsundertheme.extend.colors. - JSON — with HEX, RGB and the percentage each color occupies. Ideal for design tokens or programmatic use.
三种导入图片的方式
- Click and pick. The drop zone opens a file picker.
- Drag and drop. Drop any image file directly on the page.
- Paste from clipboard. Press Ctrl/Cmd + V after copying an image — works for screenshots, design tools, websites with Copy Image, anything.
隐私
Your image never leaves your device. Every step — decoding, sampling, clustering — happens in your browser tab. We don't have a server-side component for this tool.
常见使用场景
- Recreate a competitor's brand palette from their website screenshot.
- Pull a Tailwind config out of a moodboard.
- Match a website color scheme to a hero photo.
- Generate design tokens from a piece of artwork or photography.
- Choose accent colors for a slide deck from the cover image.
常见问题
- 颜色提取器是如何工作的？
- 该工具将您的图片加载到 HTML5 Canvas 中,对像素数据进行采样,并使用中值切割算法识别主要颜色。一切都在浏览器中运行——您的图片不会被上传到任何地方。
- 可以从图片中提取多少种颜色？
- 您可以提取 2 到 12 种主要颜色的调色板。默认值为 6 种,适合大多数用途。该算法会找到视觉上最有意义的颜色,而不仅仅是最常见的像素值。
- 支持哪些颜色格式？
- 提取的颜色以 HEX、RGB 和 HSL 格式显示。您可以一键复制任何格式,直接在 CSS、设计工具或任何需要颜色代码的地方使用。
- 颜色提取器适合什么用途？
- 非常适合从照片创建品牌调色板、为网页设计寻找配色方案、分析竞品颜色策略,或为演示文稿选择和谐的颜色组合。
- 颜色提取器免费吗？有使用限制吗？
- 完全免费,没有使用限制、无需注册。由于处理在浏览器本地进行,您的图片始终保持私密,不会被上传到任何服务器。