So nutzt du: 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.
Auch gesucht als: 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.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich Image Color Palette Extractor als Web-App installieren und offline nutzen?
Ja. Image Color Palette Extractor ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.