Cómo usar: Image Color Palette Extractor
- Choose an image, drop it in or paste it — or try the sample.
- Set how many colors you want; tick Ignore near-white and near-black for logos and product shots on plain backgrounds.
- Click any swatch to copy it, or click the image to pick the exact color of a pixel.
- Export the palette as CSS variables, a Tailwind colors config, SCSS or JSON.
How the colors are found
The image is scaled down and its pixels are grouped by color with k-means clustering: the algorithm places as many “centers” as colors you asked for, assigns each pixel to the nearest one, moves each center to the average of its pixels, and repeats until they settle. Each center becomes a swatch, and its share shows how much of the image it covers. Transparent pixels are skipped, so logos on transparent backgrounds work well.
Using the palette
- Pick a dominant color for backgrounds and a strong, contrasting one for buttons and links.
- Check text and background pairs with the Contrast Checker.
- Turn one color into a full 50–950 scale with the Tailwind Color Generator, or find its name with the Color Name Finder.
Your image is processed on your device with a canvas and never uploaded.
También se busca como: image color palette, color palette from image, extract colors from image, image color picker, get colors from photo, color extractor, logo color picker, palette generator from photo.
Herramientas que combinan con: Image Color Palette Extractor
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
Preguntas frecuentes
How do I get the color palette from an image?
Drop the image here: its main colors appear as swatches with how much of the image each covers. Change the number of colors with the slider and export the palette as CSS, Tailwind or JSON.
How do I find the HEX code of one color in a picture?
Click that spot on the image. The exact pixel color appears below it in HEX, RGB and HSL, ready to copy.
Why is white or black the top color?
Backgrounds often cover most of an image. Tick “Ignore near-white and near-black” to get the colors of the subject instead.
Is my image uploaded?
No. It is read and analyzed in your browser; nothing is sent to a server.
¿Puedo instalar Image Color Palette Extractor como aplicación web y utilizarla sin conexión?
Sí. Image Color Palette Extractor es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.