# A tool for inspecting website color roles

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

Last updated: 2026-08-25

A good tool for inspecting website color roles should connect each color to an interface job, such as page background, heading text, button fill, border, or selected state. The fastest method is to inspect the page in layers, then compare repeated colors with the elements that use them instead of treating every detected hex value as a design token.

## Start with roles, not hex codes

Use this order when reviewing a website:

1. **Canvas and surfaces**: identify the page background, navigation surface, cards, panels, inputs, and footer.
2. **Typography**: separate primary text, secondary text, placeholder text, and text placed on colored controls.
3. **Actions**: find the colors used for links, primary buttons, secondary buttons, hover states, and focus states.
4. **Structure**: record borders, dividers, shadows, and low-contrast fills.
5. **Feedback**: note colors for success, warning, error, information, and selected items.

Open the examples below and compare the first screen with the role list before naming anything. The Pangram AI Detector capture provides a useful muted green direction, while the accompanying values range from dark greens such as `#15502e` and `#233f2a` to softer tones such as `#556659` and `#799c92`. Those values are concrete observations from the example, but their final roles still depend on where they occur in the page.

## 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`

## Build a role map

Create one row for every color that has a distinct visual purpose:

| Role | Questions to answer |
| --- | --- |
| Canvas | Is this the largest page surface? |
| Surface | Does it separate a card, panel, or control from the canvas? |
| Primary text | Does it carry headings or essential labels? |
| Secondary text | Is it used for descriptions, metadata, or hints? |
| Accent | Does it identify links or the main action? |
| Accent state | Does it appear on hover, focus, active, or selected controls? |
| Border | Does it define a boundary without competing with content? |
| Feedback | Does it communicate success, warning, error, or information? |

Add the element name and location to each row. For example, "accent, primary button fill, header CTA" is more useful than "dark green." If a color appears in several roles, list those roles separately and decide whether the reuse is intentional.

## Check the role in context

Color roles cannot be judged from swatches alone. Check each foreground against the surface behind it, especially body text, small labels, input hints, button text, and links. Review normal, hover, focus, disabled, and selected states. A color that works as a large background may fail as small text, while a strong button color may need a lighter label or a darker hover value.

Also inspect transparency and layering. A border may look like a unique color because it is a transparent version of the page background. A shadow may appear as a gray token but should not be promoted to a core palette color. When two values look nearly identical, compare their role and size before keeping both.

## Decide what to keep

Keep a color as a named role when it is repeated, visually important, or needed for a state. Mark it as incidental when it comes from an image, anti-aliased edge, temporary overlay, or isolated decorative detail. A useful final set often includes:

- Canvas and surface tokens.
- Primary and secondary text tokens.
- Accent and accent-state tokens.
- Border and muted-fill tokens.
- Feedback colors, if the page uses them.
- A note for every role that still needs confirmation.

This method gives you a palette that can guide new screens without pretending that one captured page contains a complete internal design system. A Fudge color inspection helps when you want observed colors connected to their page usage, and comparison against a second reference can reveal which roles are stable and which are specific to one layout.

## Use this in your AI agent

> Inspect the captured website's color roles. For each meaningful color, report its hex value, interface role, element or section where it appears, frequency, surface behind it, and likely state. Separate core palette colors from incidental colors, flag near-duplicates and uncertain roles, check important text and control pairings, and finish with a concise role-based token table.

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

---

Document the roles that affect the most screens first: canvas, main surface, primary text, secondary text, accent, accent state, and border. These choices shape the page hierarchy and are easier to compare across references. Add feedback colors next if the product includes forms, alerts, or account states.

A practical priority order is:

1. Page background and major surfaces.
2. Heading and body text.
3. Primary and secondary actions.
4. Links, focus, hover, and selected states.
5. Borders, dividers, and input fills.
6. Success, warning, error, and information colors.

For each role, save one example element and one pairing to check. For instance, record the accent button together with its label color, not as two unrelated swatches. If a role appears only once, label it as provisional until another screen confirms it.

---

Compare three things: visual difference, element purpose, and state. If two colors are nearly identical and appear on the same kind of element, they can usually share one role. If they appear in different states, such as normal and hover, keep both and name the relationship clearly. If one is used for text and the other for a surface, they should remain separate even when their hex values are close.

Check the colors at their actual size. A small difference may matter for text readability or focus visibility but disappear in a large swatch. Transparency also matters: a border or shadow can look like a separate color while really being a layered version of a base surface.

When uncertain, keep both temporarily with notes such as `possible border variant` or `needs state confirmation`. Consolidate only after checking another page or state. This preserves evidence without turning incidental variations into permanent tokens.

## Related questions

- [Inspect a Website's Gradient Palette and Color Use](/share/tool-for-inspecting-website-gradient-palette-on-a-website)
- [A tool for inspecting a website's color palette](/share/tool-for-inspecting-website-color-palette-on-a-website)
- [Turn Accessible CTA Colors into Reusable Design Tokens](/share/turn-accessible-cta-colors-into-reusable-design-tokens)
- [Inspect Text and Background Contrast on a Website](/share/tool-for-inspecting-text-and-background-contrast-on-a-website)