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 right now
Free, private, no signup. Takes about 10 seconds.
Open the Color Palette from Image GeneratorWhat 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
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 WebAIM's contrast checker.