Why Color Extractors Show 80 Colors When Websites Only Use 5
You paste a URL into your favorite color extraction tool. The site has a clean, minimal design—maybe 5 or 6 distinct colors. But the tool returns 79 colors. What's going on?
This isn't a bug. It's a fundamental problem with how most color extractors work—and understanding it will change how you approach design analysis.
The Hidden Colors in Modern Websites
Modern websites built with CSS frameworks like Tailwind CSS or Bootstrap include their entire color palette in the compiled stylesheet—whether used or not.
What gets bundled in Tailwind CSS:
slate-50throughslate-950(11 shades)- Same for gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose...
- That's 220+ preset colors in the stylesheet
Even if the designer only used blue-500 and slate-900, the entire palette gets extracted by naive tools.
The 4 Types of Colors in Any Stylesheet
When you extract colors from a website, you're actually getting a mix of:
1. Brand Colors (What You Want)
The intentional palette: primary, secondary, accent colors chosen by the designer.
2. Framework Presets (Noise)
Tailwind's 220 colors, Bootstrap's semantic palette, Material UI's color system.
3. State Colors (Sometimes Useful)
Hover states, focus rings, error reds, success greens—often framework defaults.
4. Browser Defaults (Garbage)
Inherited colors, transparent blacks, computed values browsers add automatically.
Most color extractors don't distinguish between these. They dump everything into one list and call it a "palette."
How Smart Color Classification Works
The solution is intelligent color classification—analyzing each extracted color and determining if it's likely a brand color or framework noise.
The Classification Algorithm:
- 1. Is this a known Tailwind/Bootstrap preset color? → Filter out
- 2. Is it pure black (#000000) or white (#ffffff)? → Filter out
- 3. Is it a grayscale variant (low saturation)? → Lower priority
- 4. How saturated is the color? → Higher saturation = more likely intentional
- 5. Is it visually similar to another extracted color? → Deduplicate
- 6. Assign a "brand likelihood score" → Rank and filter
This approach separates the 5-15 actual brand colors from the 80+ noise colors.
Real Example: Analyzing a Tailwind Site
Let's compare what different tools extract from a typical Tailwind-based SaaS landing page:
| Tool | Colors Extracted | Useful? |
|---|---|---|
| Generic Extractor | 89 colors | ❌ Overwhelming |
| CSS Peeper | 52 colors | ❌ Still too many |
| BrandSpy (Primary) | 7 colors | ✅ Actual brand palette |
| BrandSpy (All CSS) | 89 colors | ✅ Available if needed |
The Two-Tab Approach
The best solution isn't to hide colors—it's to organize them intelligently:
Primary Tab
AI-filtered brand colors only. Framework presets and duplicates removed.
All CSS Tab
Every color from the stylesheet. For power users who need everything.
This gives you the best of both worlds: quick access to brand colors for 90% of use cases, with full data available when you need it.
What About Gradients?
Gradients add another layer of complexity. A single gradient might contain 3-5 color stops, each extracted as a separate color. Smart classification groups these and presents gradients as distinct design elements, not scattered hex codes.
Conclusion: Quality Over Quantity
The goal of color extraction isn't to capture every hex code in a stylesheet. It's to understand the design intent—the actual colors chosen by the designer to convey the brand.
Next time you analyze a website, look for tools that separate signal from noise. Your mood boards (and your clients) will thank you.
Try Smart Color Extraction
BrandSpy's Primary Colors filter automatically separates brand colors from framework noise.
Analyze a Website →