The 60-second answer
- Drop your image into Arturo.
- Get back the dominant colors as hex, ranked by coverage.
- Each color is tagged with a role — primary, accent, background, text — so you can wire it into a design system, not just admire it.
- Export as hex list, CSS variables, or a Tailwind theme block.
Why the eyedropper approach is unreliable
A single pixel is not the color you think it is. Three things corrupt it:
- JPEG compression shifts nearby pixels by several hex values in the same "solid" region.
- Anti-aliasing at edges blends the fill color with whatever's next to it. Sample one pixel from a rounded button and you'll pull a muddy in-between.
- Gradients and shading mean there is no single "brand blue" anywhere on the hero — every pixel is slightly different.
The trick is not to pick one pixel harder. It's to cluster many pixels and take the center of the cluster.
What "extract" should actually give you
A palette that ships needs more than colors. It needs answers to:
- Which color is primary? The most-covered color in a mockup is usually the background — not the brand.
- What role does each color play? Primary, accent, background, surface, text. Without roles, the palette is a mood, not a system.
- Are the text/background pairs accessible? Contrast ratios that pass WCAG AA at the sizes you'll actually use.
- How do I paste this into my project? Hex is the minimum. CSS variables and a Tailwind theme block save the next twenty minutes.
How Arturo extracts colors from an image
Drop the image in — a hero mockup, a moodboard, a brand photo, an AI-generated landing page. Arturo:
- Clusters the pixels into 5–8 dominant colors, weighted by coverage and visual importance (a tiny accent button still shows up).
- Assigns a role to each — primary, accent, background, surface, text.
- Flags contrast issues before you ship them into a design system.
- Exports the palette as a hex list, CSS custom properties, and a Tailwind theme block.
Where this fits in a graphic designer's workflow
- Client onboarding. Client sends three reference sites and a Pinterest board. Extract the palettes, overlay them, and start the kickoff with real colors on the table instead of adjectives.
- Brand refresh. Pull the palette out of every asset the brand currently uses. Drift shows up immediately — the "blue" on the site, the deck, and the packaging are almost never the same blue.
- Design system seeding. Start a token file from a real mockup instead of hand-typing eight hex codes and naming them "brand-1" through "brand-8".
- AI mockup to real site. AI hero images look great; they don't come with a palette. Extract one so the rest of the site actually matches.
Common questions
How many colors should a palette have?
For a website, 5–8 is the sweet spot: primary, accent, background, surface, and two or three text/border neutrals. More than that and you're documenting the mockup, not building a system.
Can I extract colors from a PDF?
Yes — drop the PDF in directly. Arturo rasterizes each page and runs the same extraction. Great for pulling a palette out of a brand guidelines PDF where the swatches aren't tagged with hex values.
What if the image has a photograph as the background?
Photographic backgrounds pull the palette toward whatever's biggest — the sky, the wall, the product surface. Arturo weights accent regions higher so the actual brand color (a button, a badge) still surfaces in the output.
Try it on an image right now
First 25 assets are free — no signup required. Drop in the image and get palette, fonts, and clean images out in about three minutes.