Image preview
See the selected image, hover with the loupe and click exact pixels when the automatic palette misses a detail.
Free. Private. No uploads.
Image Color Extractor
Extract accurate palettes from screenshots, logos, photos and UI mockups directly in your browser. Pocket Dev uses perceptual sampling, modern color spaces and local processing so your visual files stay private.
What it does
Turn an image into a practical developer palette.
Image Color Extractor uses a Perceptual Median Cut algorithm to build mathematically accurate palettes from any local image. It supports OKLCH, Display P3, CSS variables, Tailwind exports, SVGs and manual pixel sampling without uploading the image anywhere.
Modern color output
Generate swatches with copy-ready HEX, RGB, HSL, OKLCH and Display P3 values for CSS or design tokens.
Local image processing
The selected image is read in your browser and does not need a server upload.
How to use
Use Image Color Extractor in a few steps.
- Open the Image Color Extractor tool inside Pocket Dev.
- Choose, drop or paste an image from your device.
- Adjust the palette size or background filter.
- Extract colors, then use the loupe to sample specific pixels manually if needed.
- Export the palette as CSS, Tailwind, SVG, JSON, swatches or a moodboard.
FAQ
Image Color Extractor questions
Is this image color extractor free?
Yes. Pocket Tools is free to use.
Are my images uploaded?
No. The image is processed locally in your browser.
Can I use the colors in CSS?
Yes. The extracted colors can be copied as CSS variables, Tailwind variables, SVG swatches, OKLCH, Display P3, HEX, RGB and HSL values.