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.
Cómo funciona
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.
¿Por qué k-means y no otros algoritmos?
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.
Formatos de exportación
- 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.
Tres formas de cargar una imagen
- 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.
Privacidad
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.
Casos de uso frecuentes
- 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.
Preguntas Frecuentes
- ¿El extractor de colores sube mis imágenes a un servidor?
- No. Tu imagen nunca sale de tu dispositivo. Cada paso — decodificación, muestreo de píxeles, clustering k-means — ocurre completamente en la pestaña de tu navegador. No hay componente del lado del servidor para esta herramienta.
- ¿Qué formatos de exportación están disponibles para las paletas extraídas?
- Puedes exportar paletas como lista HEX, lista RGB, lista HSL, variables CSS (listas para :root {}), configuración de Tailwind (para pegar en tailwind.config.js), o JSON con HEX, RGB y porcentajes de frecuencia de color. Todos los formatos se copian con un solo clic.
- ¿Cómo funciona el algoritmo de extracción de colores?
- La herramienta usa clustering k-means — el mismo algoritmo usado por Adobe Color y herramientas profesionales. Muestrea hasta 20,000 píxeles de tu imagen y los agrupa en clusters, encontrando los colores dominantes. Los resultados se ordenan por frecuencia para que el color más prominente aparezca primero.
- ¿Cuáles son los casos de uso comunes para un extractor de paletas de color?
- Los diseñadores lo usan para recrear paletas de marca a partir de capturas de pantalla, extraer configuraciones de Tailwind de moodboards, hacer coincidir los colores de un sitio web con fotos hero, generar tokens de diseño a partir de obras de arte, y elegir colores de acento para presentaciones desde imágenes de portada.
- ¿El extractor de colores es gratis? ¿Cuántos colores puedo extraer?
- La herramienta es completamente gratuita sin registro y sin límites. Puedes extraer paletas de 4, 6, 8, 10 o 12 colores de cualquier imagen. Como todo el procesamiento se ejecuta en tu navegador, no hay límites de uso ni caps diarios.