See the color system behind a public page

What Website Scanner analyzes

Scanner looks for color values in the fetched page source and linked CSS files that are available to the scan service. It can recognize common CSS representations and normalize them into a comparable inventory.

• Hex values
• RGB and RGBA functions
• HSL and HSLA functions
• Supported CSS named colors
• Colors found in inline styles, style blocks, and reachable linked stylesheets

Run a scan

Read the scan summary

A high color count is not automatically a problem. Complex data visualization, illustrations, syntax highlighting, third-party widgets, and embedded systems can legitimately use many colors.

Use the color inventory

The inventory orders colors by frequency and provides contextual information such as occurrence count, percentage of detected references, light or dark classification, and likely roles.

• Frequent light colors are often surfaces or page backgrounds.
• Frequent dark colors are often text, navigation, or deep surfaces.
• Highly saturated colors may be actions, alerts, or brand accents.
• Rare colors can be intentional states, illustrations, or obsolete leftovers.

Review near-duplicate groups

Near-duplicates are colors close enough to deserve review. They may reveal:

• Several almost-identical grays used for the same border role.
• Copied components with slightly different brand colors.
• Manual opacity approximations that should be tokens.
• Legacy values that survived a redesign.

Do not merge colors solely because the values are close. Two nearby colors can serve distinct contrast or state requirements. Check their real usage before consolidating them.

Use suggested tokens as a starting point

Scanner can propose semantic CSS variables based on frequency, lightness, and likely role. Pro export can provide a starter token block.

:root {
  --color-background: #FFFFFF;
  --color-surface: #F8FAFB;
  --color-text: #111827;
  --color-muted: #667085;
  --color-primary: #1B8E2D;
}

Rename and validate every token before production. A useful token system describes purpose rather than the current appearance alone.

• Prefer --color-text-primary over --dark-gray.
• Separate role tokens from raw palette primitives when building a larger system.
• Define hover, active, focus, disabled, success, warning, and error states explicitly.
• Run contrast checks after consolidation.

Save and reopen scans

Successful Pro scans can be saved to the account workspace. The latest scan can reopen automatically when you return to Scanner, and saved scans appear in the Dashboard library.

A saved scan is a snapshot of what Scanner detected at that time. It does not update automatically when the website changes; run a new scan to compare the current source.

Understand the limitations

Scanner may not capture every color a user can see. Common gaps include:

• Colors created only after JavaScript runs
• Styles inside authenticated pages or private applications
• Cross-origin stylesheets that block retrieval
• Canvas, video, raster images, SVG images loaded as external files, and WebGL
• Colors generated inside closed shadow roots or third-party widgets
• Hover, focus, media-query, and user-specific states not present in the scanned source path
• Runtime CSS variables whose final values depend on application state
• Visual blending caused by transparency, filters, gradients, and backdrop effects

Use Scanner responsibly

• Scan only public pages you are authorized to analyze.
• Do not use Scanner to bypass authentication, access controls, or robots restrictions.
• Respect third-party ownership, trademarks, licensing, and terms of service.
• Verify brand values against the owner’s current official documentation.
• Use scan output as analysis, not as permission to copy another product’s design system.