Skip to main content

​
Website Design Inspector

Extract the complete design system from any website — colors, typography, background/text combinations, and contrast ratios — in seconds. Perfect for competitive analysis, brand inspiration, or recreating a design aesthetic. Credit Cost: 2 credits per inspection
Access: app.wrldwide.ai/website-inspector

​
Overview

Enter any URL and the Website Design Inspector will:
  1. Screenshot the live website
  2. Extract all colors used (backgrounds, text, accents)
  3. Identify all fonts and their weights/sizes
  4. Map background-text combinations with contrast ratios
  5. Deliver a complete, copy-ready design report

​
What Gets Extracted

​
🎨 Colors

The inspector categorizes colors into three groups:
CategoryWhat It Shows
Main BackgroundsPrimary background colors and their usage frequency
Main Text ColorsBody text, heading, and label colors
Accent ColorsCTA buttons, highlights, links, interactive elements
All ColorsComplete palette sorted by usage percentage
For each color you get:
  • HEX code (e.g., #7c5cfc)
  • RGB values (e.g., rgb(124, 92, 252))
  • Color name (e.g., “Medium Slate Blue”)
  • Usage percentage — how much of the site uses this color

​
✍️ Typography

Font extraction reveals:
DataWhat It Shows
Font FamilyTypeface name (e.g., “Inter”, “Geist”, “DM Sans”)
Weights UsedWhich weights are active (300, 400, 600, 700, etc.)
Sizes UsedFont size range (e.g., 12px, 14px, 16px, 24px, 48px)
UsageHow frequently the font appears

​
🔲 Background-Text Combinations

The most actionable section — shows exactly which colors are used together:
  • Background color + Text color pairings
  • Count — how many times this combination appears
  • Contrast ratio — accessibility score (WCAG compliance)
  • Visual preview — see the actual combination rendered

​
How to Use

1

Open Website Design Inspector

Navigate to app.wrldwide.ai/website-inspector
2

Enter Website URL

Type or paste the full URL of the website you want to inspect.Examples:
  • https://apple.com
  • https://shopify.com
  • https://yourcompetitor.com
Works on any public website.
3

Click Extract

Click Extract Design (costs 2 credits). The inspector will:
  • Load and screenshot the live site
  • Process colors, fonts, and combinations
  • Return results in ~10-20 seconds
4

Review Colors

Browse the color sections — Main Backgrounds, Main Text Colors, Accent Colors. Click any color to copy its HEX code instantly.
5

Review Typography

See which fonts are used and at which weights. Note the font family names for use in your own designs or prompts.
6

Review Combinations

The background-text combinations section shows the actual color pairings used. Check contrast ratios for accessibility.
7

Copy and Apply

Use the one-click copy buttons to grab HEX codes, font names, or full color palettes. Apply to your brand assets or image generation prompts.

​
Key Features

The inspector loads and renders the actual live website — including dynamic elements, CSS variables, and current design. You see what visitors see.
Colors are ranked by how frequently they appear. The top colors are what define the site’s visual identity — not just what exists in CSS files.
Each background-text combination is scored for accessibility compliance. This is useful for both design inspiration and ensuring your own designs meet WCAG standards.
Every color value (HEX, RGB) has a copy button. Font names can be copied directly. No manual transcription required.
See a screenshot of the inspected website alongside the extracted data — so you can cross-reference colors with what you’re seeing visually.

​
Use Cases

​
Competitive Design Research

Inspect competitor websites to understand their design language:
  • What color palette do they use?
  • Are they using warm or cool tones?
  • What’s their accent color for CTAs?
  • Which fonts signal their brand personality?

​
Brand Cloning for Ads

Extract the exact colors and fonts from a successful brand, then use them in your own creative prompts: 
Generate a skincare product ad using this color palette:
Background: #F5F0E8 (warm off-white)
Text: #1A1A1A (near-black)
Accent: #C4956A (warm gold)
Font style: Clean sans-serif, similar to "Canela" typeface

​
Design System Documentation

Inspect your own website to document your live design system — useful for brand guidelines, onboarding designers, or auditing consistency.

​
Style Transfer Inspiration

Use the extracted palette in Style Transfer to apply a website’s visual aesthetic to your product images.

​
Prompt Engineering with Extracted Data

Use inspector results directly in image generation prompts: Before (vague): 
Product photo in Glossier style
After (precise, using extracted data): 
Product photo, background color #F5F0EB (warm cream), 
accent color #E8C4B8 (dusty rose), clean sans-serif typography,
minimal white space, soft diffused lighting, premium DTC aesthetic
The more precise your color and font references, the more accurate your AI-generated visuals.

​
Next Steps

Image Generation

Use extracted colors in image prompts

Style Transfer

Apply design aesthetics to product images

Logo Creation

Create logos using your color palette

Ad Insight

Analyze competitor ad creatives