Extract Colors from an Image
To extract colors from an image, upload the photo to a color extraction tool that runs a dominant-color algorithm and returns each color as a hex, RGB, or HSL value. PhotoTones does this in under a second, entirely in your browser, for free.
The 3-Step Method
- Open PhotoTones at phototones.com. Any modern browser (Chrome, Firefox, Safari, Edge) works.
- Upload your image. Click "Choose an image" and pick any JPG, PNG, GIF, WebP, BMP, or SVG file. The image loads into the preview area instantly.
- Click "Generate Color Palette". Up to 6 dominant colors appear as swatches, each with its hex code. Pro users can extend to 8, 10, or 12 colors.
Extract colors in under a second
Free, private, no signup. Pro unlocks brand kit ZIP, 12 colors, and professional exports.
What Gets Extracted
PhotoTones uses a hybrid algorithm to surface the most perceptually relevant colors — not just the most numerous pixels:
- Vibrant.js (based on Android's Palette API) categorizes 6 dominant colors into Vibrant, Dark Vibrant, Light Vibrant, Muted, Dark Muted, and Light Muted — giving you balanced contrast for UI and brand work.
- ColorThief (Pro) adds up to 6 more colors via k-means clustering for photos with rich tonal range.
- Deduplication removes any two swatches within 30 units of RGB distance so every color is meaningfully distinct.
- Hue sorting arranges the final palette by HSL hue for visual harmony.
Output Formats
- Hex:
#3B82F6— the default for CSS, Figma, Sketch, and most design tools - RGB:
rgb(59, 130, 246)— useful for CSS alpha compositing and canvas work - HSL:
hsl(217, 91%, 60%)— ideal for generating tints, shades, and design tokens - Composite JPEG (or lossless PNG on Pro) — a downloadable image with the swatches attached to your original photo
Why Extract Locally Instead of Uploading?
PhotoTones runs entirely in your browser using the HTML5 Canvas API. Your image is never transmitted to a server, never stored, and never shared. This makes it safe to extract colors from:
- Unreleased brand assets and product shots
- Client photography under NDA
- Personal photos you don't want on third-party servers
- Corporate or internal design work
Free vs PhotoTones Pro
PhotoTones is free forever — extract 6 colors per image with hex, RGB, and HSL copy, plus a 50% resolution composite JPEG download. No signup required. PhotoTones Pro ($7/month, cancel anytime) extends palettes to 8, 10, or 12 colors, full-resolution and lossless PNG downloads, brand kit ZIP, design tokens, Figma JSON, and professional exports (Adobe ASE, Tailwind, SCSS, CSS).
Frequently Asked Questions
How do I extract the dominant color from an image?
Upload the image to PhotoTones and click "Generate Color Palette". The first swatch returned is the most vibrant dominant color. Click it to copy its hex code.
Can I extract an exact pixel color from a photo?
PhotoTones extracts dominant colors, not arbitrary single-pixel values. For pixel-perfect picking, see our color picker from image guide.
How accurate is the color extraction?
The Vibrant.js algorithm PhotoTones uses is the same technique Google's Android framework uses for dynamic theming. Accuracy is consistently within a few percent of values reported by tools like Adobe Color and the WebAIM contrast checker.
What image formats does PhotoTones support for color extraction?
PhotoTones accepts JPG, PNG, GIF, WebP, BMP, and SVG files. SVG logos render via the Canvas API before extraction. All formats are processed locally in your browser with no upload.