Como 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.
Também pesquisado 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.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o Image Color Palette Extractor como um aplicativo da web e usá-lo offline?
Sim. O Image Color Palette Extractor é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.