Color palette extractor. From image to swatches.
Drop an image. We extract the dominant color plus an 8-color palette using median-cut quantization. Each swatch shows hex, RGB, HSL — click to copy. Powered by ColorThief (MIT). Browser-only.
Drop an image, paste an HTTPS URL, or pick a sample. We extract the dominant color and a full palette using median-cut quantization. Each swatch shows hex, RGB, and HSL — click any to copy. Powered by ColorThief (MIT).
Sources used
- ColorThief — MIT-licensed median-cut color extractor (~12KB minified)
- Median cut — the color quantization algorithm ColorThief implements
Color extraction happens in your browser. Image data is never uploaded to Digital Heroes servers.
Privacy: extraction is in-browser. Nothing is logged.
Three use cases extraction nails.
1. Brand-from-photography. A founding team shows up with a hero image — the workshop, the storefront, the product in-use — and asks "what colors should our brand use?" Extract the palette from the image; the result is a starting set of colors that already feel coherent because they're all sampled from the same scene. From there, narrow to the 3-5 that work hardest, and you have a brand palette grounded in the actual product story.
2. Reverse-engineer a competitor's palette. Screenshot a competitor's hero or marketing page, drop it here. The dominant + top palette colors give you their visual identity in 30 seconds. Useful for competitive positioning — you want to look related-but-distinct, which means knowing what they look like before you decide what you'll look like. Also a good first step in a brand-refresh project to see what the existing brand actually shipped vs the brand book.
3. Generate a CSS color palette from a hero image. The Tailwind config / CSS variables export gives you a ready-to-paste palette declaration. Useful when designing a landing page where the hero photograph is the brand-grounding element — derived colors automatically harmonize with the photograph. Pair with our Gradient Generator for hero background work and our Color Contrast Checker to verify accessibility.
Four jobs this tool covers.
Job 1: Build a brand palette from a hero image. Drop the workshop photo, the founder portrait, the product shot, the city skyline — whatever is the brand's visual anchor. Extract the palette, narrow to the 3-5 colors that work hardest, copy as Tailwind config or CSS variables. Pair with our brand identity service for the full brand-system engagement.
Job 2: Match a Pinterest mood board. Drop each pinned image one at a time, collect the dominant colors. After 8-10 images you have a frequency distribution that tells you what colors actually dominate the mood board (different from what the mood board "feels" like — palette extraction surfaces the unconscious patterns).
Job 3: Spot brand-color drift. Drop a screenshot of any page on a brand's site, compare the extracted dominant to the brand's documented primary color. Drift is common — what shipped to production often differs from what the brand book says. The mismatch is usually the design system slowly losing fidelity over time and is a useful audit signal.
Job 4: Generate accent colors for an editorial layout. Drop the hero image of an article. The extracted palette gives you a callout box color, a quote highlight color, an accent color — all derived from and harmonious with the hero. Faster than picking by eye and more defensible in design review.
Six questions users ask.
How does the extraction work?
ColorThief implements the median-cut algorithm — the same technique GIF compression uses to reduce a 24-bit color image to a 256-color palette. The image's pixels are recursively split into color-space buckets along the longest color dimension; each bucket's average color becomes one palette entry. The dominant color is the largest bucket. Median cut tends to surface perceptually-relevant colors (the ones that take up the most visual space), not just statistically frequent ones.
Why does the palette change every time I re-extract?
It shouldn't, for the same image at the same quality. If you're seeing variation, you've likely changed the quality setting (which trades accuracy for speed) or uploaded a slightly different version of the image (compressed JPEG vs original, different crop). The algorithm is deterministic given fixed input + parameters. Quality 10 is the default — finer color sampling but slower; quality 1 samples every pixel and is the most precise; quality 50 samples 1 in 50 pixels and is much faster but less precise on small images.
What's the difference between dominant and palette?
Dominant is a single color — the algorithm's best guess at the one color most representative of the image. Useful for setting a background tint, a hero accent, or a brand-derivative color. Palette is the full 8-color set — useful for building a brand color system from a hero photograph, designing a poster from an artwork, or generating a CSS custom-property starter set. Dominant is usually one of the palette colors, not always the first one (the algorithm picks based on visual weight, not bucket order).
Can I extract from a URL instead of upload?
Yes, paste any HTTPS image URL. The browser fetches the image with crossOrigin='anonymous', which means the source server must send Access-Control-Allow-Origin: * for the fetch to succeed (most CDNs do; some custom hosts do not). If the URL fails, drop the file directly instead — the file-input path bypasses CORS entirely. For privacy-sensitive images, file upload is also the safer choice — the URL fetch can leak which images you're inspecting to the source server's logs.
Will it find the brand color of a screenshot?
Often. Screenshots of a single brand's site usually have the brand color as one of the top palette entries — the dominant color tends to be the background (white / cream / black), but the second or third palette entry is usually the primary brand color. Better practice: crop the screenshot to just the brand element (logo, button, hero) before extracting; you'll get cleaner results. For derivative palettes from photos, full-image extraction is fine.
Is the image I upload sent anywhere?
No. Color extraction happens entirely in your browser using ColorThief, loaded once at page-load from jsDelivr CDN. Upload via file input goes through FileReader → canvas → ColorThief, all client-side. URL fetch goes from your browser to the source URL (whatever HTTPS address you paste); it never passes through Digital Heroes servers. The only network request to digitalheroes.co.in is the initial page load.
Published · Last updated .