Pick colors, generate harmonies & export palettes from any image!
Drop an Image Here
Or Click to Browse
Pick Colors
Click anywhere on the image
Auto Extract
Dominant colors detected
Export Palette
JSON, CSS, SCSS & more
Use the Magnifier
Get pixel-perfect color selection with 8x magnification
Explore Harmonies
Discover complementary, analogous & triadic color schemes
Export Formats
JSON for apps, CSS/SCSS for web, ASE for Adobe
Adjust Extraction
Increase color count for more detailed palettes
Drag and drop an image file or click to browse. The tool supports JPEG, PNG, WebP, GIF, and BMP formats up to 25 MB. Your image is processed entirely in the browser.
Hover over any part of the image to see the color under your cursor with a magnified preview. Click to select a color, and its HEX, RGB, and HSL values appear instantly.
The tool automatically extracts dominant colors from the image and generates a harmonious palette. View complementary, analogous, triadic, and split-complementary color schemes derived from your selections.
Click any color swatch to copy its value in HEX, RGB, or HSL format. Export the full palette as JSON, CSS custom properties, SCSS variables, or ASE file.
A zoomed-in preview around your cursor lets you pick the exact pixel you want. No more guessing which shade of blue you are selecting.
The tool analyzes the image and extracts its dominant colors. You get a ready-to-use palette without manually sampling dozens of points.
Generate complementary, analogous, triadic, and split-complementary harmonies from any selected color. Build cohesive color schemes based on established color theory.
Copy colors as HEX, RGB, or HSL values. Export palettes as CSS custom properties, SCSS variables, JSON, or ASE files for use in any design tool.
See the brightness range and color distribution of extracted colors to make informed design decisions about your palette.
Images are processed locally in your browser. No uploads, no server calls, no privacy concerns with proprietary designs or client work.
UI and web designers extract colors from inspiration images, brand photography, and competitor websites to build consistent color palettes. Instead of eyeballing hex codes, the eyedropper and harmony tools give you precise values that you can plug directly into Figma, CSS, or your design tokens.
Brand designers and marketing teams use color extraction to ensure visual consistency across campaigns. Upload a hero image from a photoshoot and instantly get the exact shades used, making it easy to match social media graphics, email templates, and print materials to the same palette.
Artists, illustrators, and photographers analyze color relationships in reference images to inform their own work. The harmony analysis reveals why certain photos feel cohesive, helping you apply the same color theory principles to your compositions and edits.
The tool typically extracts 5 to 8 dominant colors from an image, depending on its color complexity. Simple images with few tones might yield 3 to 4 colors, while vibrant photographs with many hues can produce a richer palette.
You can copy any color in HEX (e.g., #3B82F6), RGB (e.g., rgb(59, 130, 246)), or HSL format. HEX is most common for web development, RGB for CSS and design tools, and HSL for intuitive color adjustments.
The tool provides brightness analysis for extracted colors, helping you assess whether color combinations will provide sufficient visual contrast. For detailed WCAG compliance testing, we recommend using a dedicated contrast checker alongside this tool.
Yes, the tool works with any raster image regardless of source. Upload screenshots of websites, digital paintings, app mockups, or flat design illustrations. The eyedropper and palette extraction work identically on photographs and digital artwork.
Images up to 25 MB are supported. Since all processing is done locally in your browser, larger images may take a moment to analyze depending on your device. For best performance, images under 10 MB work nearly instantly.