# Analyze Color Roles from a Live Website

[Open the live Fudge conversation](https://design.withfudge.com/share/analyze-color-roles-from-a-live-website)

Last updated: 2026-08-25

The clearest way to analyze color roles is to group visible colors by job, then check where each one appears and how often it repeats. Start with the page background, surfaces, text, borders, actions, links, focus states, and status states. Treat illustrations, photographs, charts, and gradients separately unless their colors also appear in interface controls.

## Build the role map first

Review the page in this order:

1. **Canvas and surfaces:** Identify the page background, raised panels, cards, inputs, and navigation surfaces.
2. **Text hierarchy:** Separate primary text, secondary text, muted labels, disabled text, and text on colored surfaces.
3. **Borders and dividers:** Check whether lines are neutral, tinted, transparent, or replaced by surface contrast.
4. **Brand and action colors:** Find colors used for primary buttons, links, selected states, focus treatment, and meaningful icons.
5. **Status colors:** Look for success, warning, danger, and informational states. These may appear rarely but still need distinct roles.
6. **Decoration:** Keep hero gradients, illustrations, charts, and photography out of the interface palette unless they repeat in controls.

This prevents every visible shade from becoming an equally important token. A color used once in an illustration should not automatically become a global accent.

The supplied Pangram capture and palette provide a concrete example. The observed colors include dark and muted greens such as `#496c10`, `#15502e`, `#14532d`, and `#233f2a`, plus lighter green and gray-green values such as `#2a966f` and `#799c92`. These are observed examples, not a complete official token list. Use their placement in the capture to test whether each shade functions as a surface, action, supporting accent, or muted text color.

## Captured pages

[![Pangram AI Detector](https://pin.fontofweb.com/9687?format=jpg)](https://design.withfudge.com/share/pin-9687)

[Pangram AI Detector](https://design.withfudge.com/share/pin-9687)

## Colors

- `#496c10`
- `#15502e`
- `#14532d`
- `#233f2a`
- `#254f1a`
- `#1e6f30`
- `#295631`
- `#556659`
- `#4a5a4a`
- `#2c7a4a`
- `#2a966f`
- `#799c92`

## Check frequency and contrast

For each candidate color, record frequency, placement, and contrast. A dark green may be a surface, button, link, or text color. The hex value alone cannot establish its role. Check normal text, large text, button labels, placeholder text, links, meaningful icons, and focus indicators against their actual backgrounds. If one color appears on several surfaces, test every important pairing.

Create an evidence table with color, number of locations, component types, state changes, and background pairings. A color used in a primary button, link, icon, and selected navigation item is a stronger interface-token candidate than a similar color used only in a graphic. A color used in one button may still be valid, but mark it as component-specific until another page or state confirms it.

## Separate stable tokens from decoration

Make two lists. The first contains likely interface roles: background, surface, foreground, muted foreground, border, accent, accent contrast, success, warning, and danger. The second contains page-specific colors such as gradients, photos, charts, and illustrations.

Also capture state changes. A primary action may need default, hover, pressed, disabled, and focus values. A border may become stronger on focus or error. Keep close shades separate when their jobs differ. A deep green surface and a dark green action may look similar but should not share a name if changing one could harm contrast elsewhere.

## Prepare a useful handoff

| Role | Observed color | Where to verify |
|---|---|---|
| Main background | darkest repeated surface | page canvas |
| Raised surface | lighter neighboring surface | cards and panels |
| Primary action | repeated high-attention color | buttons and links |
| Muted text | lower-contrast neutral | labels and descriptions |
| Border | subtle separator | inputs and dividers |
| Status | state-specific color | alerts and validation |

Add a confidence note to every row: repeated, component-specific, or uncertain. This creates a practical role map without claiming to reproduce an official design system. Verify light and dark surfaces, responsive layouts, and available interaction states before implementation.

## Use this in your AI agent

> Analyze the captured website's color roles. Group observed colors into backgrounds, surfaces, text hierarchy, borders, primary actions, links, focus, and status states. Include hex values only when visible in the evidence, note frequency and placement, test important foreground-background pairs for contrast, separate interface colors from decoration, and return a role-based palette with confidence notes.

[Install Fudge for your AI agent](/mcp) to review saved website references and prepare a practical color handoff.

---

Check repetition, placement, and behavior together. A likely interface color appears in more than one meaningful control or surface, carries a repeated action or status, or changes predictably across hover, focus, pressed, and disabled states. A decorative color usually belongs to one illustration, gradient, chart, photo, or hero treatment and does not control interaction.

Record the color, number of locations, component types, state changes, and background pairings. A green used in a primary button, link, icon, and selected navigation item is a stronger token candidate than a similar green used only in a graphic. A color used in one button may still be a real action color, but mark it as component-specific until another page confirms it.

Check whether the color has a contrasting companion. Interface colors often need readable text or icons, while decorative fills may not. Keep close shades separate when their jobs differ. When uncertain, write "possible accent, seen in one primary action" instead of claiming it is the official brand color.

---

Provide a role-based palette, usage notes, confidence labels, and a verification checklist. A useful starting structure is:

```css
:root {
  --color-background: /* observed page canvas */;
  --color-surface: /* repeated card or panel surface */;
  --color-foreground: /* primary text */;
  --color-muted: /* secondary or muted text */;
  --color-border: /* repeated divider or field edge */;
  --color-accent: /* repeated action color */;
  --color-accent-contrast: /* readable text on accent */;
  --color-success: /* verify from a success state */;
  --color-danger: /* verify from an error state */;
}
```

Put the observed hex beside each variable, describe where it appeared, and mark whether it repeated across pages or states. Do not fill uncertain values as if they were confirmed. Test default, hover, focus, pressed, disabled, error, and success states where available. Also test light and dark surfaces, responsive layouts, and text or icon contrast.

Keep gradients and illustration colors in a separate section unless they are reused in controls. This gives a developer enough direction for a consistent first pass while preserving a clear boundary between observed website details and an official specification.

## Related questions

- [Analyze Component Styles from a Live Website](/share/analyze-component-styles-from-a-live-website)
- [Analyze Border Radii and Shadows from a Live Website](/share/analyze-border-radii-and-shadows-from-a-live-website)
- [Analyze Gradients and Backgrounds from a Live Website](/share/analyze-gradients-and-backgrounds-from-a-live-website)
- [Website Design Analyzer for Typography Hierarchy](/share/website-design-analyzer-for-typography-hierarchy)