# Website design analyzer for color roles

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

Last updated: 2026-08-25

A website design analyzer for color roles should explain how colors function across a page, not merely return a list of hex values. The useful outcome is a role-based palette that shows which colors support the background, text, borders, actions, status states, and emphasis.

## Build the palette by role

Start by sorting visible colors into these groups:

- **Backgrounds:** page canvas, raised surfaces, cards, panels, and overlays.
- **Text:** primary text, secondary text, muted labels, and text on colored controls.
- **Borders and dividers:** quiet separators, input outlines, focus rings, and selected states.
- **Actions:** primary buttons, links, active navigation, and hover treatments.
- **Status:** success, warning, error, and informational messages.
- **Accent and emphasis:** highlights, illustrations, badges, and decorative color that draws attention without carrying the main action.

For every color, ask what job it performs and what it sits beside. A green tone used for a primary button has a different role from a green tone used for success messaging, even if the values are similar. Also record whether a color appears frequently or only in a special state. Frequency can suggest a foundation color, but it does not determine meaning by itself.

The supplied example shows a captured Pangram page and a muted green direction. The palette includes dark greens such as `#15502e` and `#14532d`, lighter greens such as `#2c7a4a` and `#2a966f`, and gray-green values such as `#556659` and `#4a5a4a`. Treat these as observed reference colors, not as a complete or official Pangram token set.

## 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 contrast and combinations

A role-based review should test pairs, not colors in isolation. Check primary text against its background, muted text against the surface, button text against the action color, borders against adjacent surfaces, and focus indicators against both the component and page background.

| Role | Sample color | Pair to test | Decision |
| --- | --- | --- | --- |
| Page background | Canvas color | Primary text | Is reading comfortable? |
| Surface | Card or panel color | Body and muted text | Does the layer remain distinct? |
| Action | Main accent | Button label | Is the action easy to find? |
| Border | Divider tone | Adjacent surfaces | Is the boundary visible without noise? |
| Status | Success, warning, or error | Status text and icon | Is meaning supported beyond color? |

Do not use color alone for errors, success, or selected states. Pair color with text, icons, outlines, position, or another clear cue. Check focus states separately because a subtle brand accent may disappear against a saturated button or dark surface.

## Turn observed colors into tokens

Once roles are clear, write semantic variables rather than scattering hex values through components:

```css
:root {
  --color-page: #f7f8f6;
  --color-surface: #ffffff;
  --color-text: #172018;
  --color-text-muted: #556659;
  --color-action: #15502e;
  --color-action-hover: #14532d;
  --color-border: #d7ded7;
  --color-success: #2c7a4a;
}
```

These values demonstrate structure. They do not claim that the captured example uses those exact assignments. Replace each value after checking its actual role and contrast. Keep action, status, and decorative colors separate even when they share a hue family. This makes later changes safer and prevents one brand color from carrying too many meanings.

## Review the whole page

For each section, capture the dominant background, surface colors, text hierarchy, action color, border treatment, and state colors. Compare repeated components across sections. If the same role uses several close colors, decide whether they represent intentional levels or accidental drift.

A focused review can inspect color roles, frequency, contrast, borders, gradients, and component styles together. It can also compare a captured reference with another page when you need to see whether a color rule repeats. The Pangram example is useful for studying a muted green direction, but it does not replace checking the page you are designing.

For a practical handoff, list each observed value, its likely role, where it appears, and your confidence in the assignment. Mark recommendations separately from direct observations. Then test the resulting palette on normal, hover, focus, disabled, success, warning, and error states. Include labels or icons wherever color carries status meaning.

## Use this in your AI agent

> Analyze this website capture for color roles. Group observed colors into page backgrounds, surfaces, primary and muted text, borders, dividers, actions, focus states, status colors, and decorative accents. Report each color with its visible role, approximate frequency, nearby background, and contrast concerns. Separate observed values from estimates, identify repeated semantic tokens, flag places where color alone carries meaning, and finish with a CSS variable draft that uses role names instead of raw color names.

[Install Fudge for your AI agent](/mcp).

---

Look at where the color appears and whether it repeats across unrelated parts of the page. A brand color often appears in identity elements, key actions, links, highlights, or illustrations. A UI state color usually appears in a narrower context, such as success messages, warnings, errors, selected controls, or validation feedback.

Check the color's behavior across states. If a tone has hover, pressed, focus, or disabled variations on the main action, it may be an action token built from the brand palette. If it appears only beside success text and icons, it is more likely a status color. Also check whether removing the color would remove meaning. If the page still communicates the state through text, iconography, or an outline, the color is probably supporting a state rather than defining the brand.

Do not force one color into multiple roles without testing contrast and meaning. Document the role you observed, then verify it against additional pages and interaction states.

---

Use a three-pass method. First, collect repeated colors from the page canvas, surfaces, text, borders, actions, and status states. Ignore one-off image colors unless they clearly influence the interface.

Second, assign roles before choosing names. Decide which tone is primary text, muted text, the main action, and the boundary between a card and the page. Test important pairs immediately: body text on the page background, button text on the action color, muted text on surfaces, and focus indicators against their surroundings.

Third, reduce the list into semantic tokens such as page, surface, surface-raised, text, text-muted, border, action, action-hover, focus, success, warning, and danger. Keep variants only when they support a real state or hierarchy.

The result should be a palette you can apply and revise, not a claim that every observed value belongs in production. Mark uncertain assignments, verify additional states, and check the palette with people who may experience low contrast or color-dependent status cues.

## Related questions

- [Website design analyzer for component styles](/share/website-design-analyzer-for-component-styles)
- [Website Design Analyzer for Border Radii and Shadows](/share/website-design-analyzer-for-border-radii-and-shadows)
- [Website Design Analyzer for Gradients and Backgrounds](/share/website-design-analyzer-for-gradients-and-backgrounds)
- [Inspect a Website's Typography Hierarchy from Its URL](/share/inspect-a-website-s-typography-hierarchy-from-its-url)