# Extract Website Color Roles from a URL

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

Last updated: 2026-08-25

The fastest way to extract website color roles from a URL is to separate the colors you see from the jobs they perform. Build a role map for the page background, surfaces, text, brand accent, links, buttons, borders, status states, and decorative areas. Then verify each role against the page instead of treating every hex value as an independent token.

## Build a role map

Use this checklist while reviewing the page:

| Role | What to inspect | Decision to make |
|---|---|---|
| Page background | Main canvas and large sections | Is the base light, dark, or layered? |
| Surface | Cards, navigation, forms, panels | Does it separate content from the canvas? |
| Primary text | Headings, body copy, labels | Which color carries the reading work? |
| Muted text | Supporting copy and metadata | Is it still readable at its actual size? |
| Brand accent | Logo, links, highlights, active states | Is the hue used consistently? |
| Action color | Main buttons and important controls | Can visitors find the next action? |
| Border | Cards, inputs, dividers | Is it structural or decorative? |
| Status color | Success, warning, error, information | Is color paired with another cue? |
| Decorative color | Gradients, illustrations, tinted sections | Does it support hierarchy without competing? |

For every likely role, record the hex value, location, repetition, content placed on top, and state variation. A color used across buttons, links, icons, and selected controls is a stronger accent candidate than a shade that appears once in an illustration.

The captured reference below includes a Pangram page described as using a muted-green direction and a color set containing dark greens, mid greens, and softer gray-green shades. Compare its relationships before borrowing anything. The evidence does not describe every page at the URL you may review.

## 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 usage and state

A role map becomes useful when every value has context. Ask where the color appears, how often it appears, what sits on top of it, what it communicates, and whether it changes for hover, focus, selected, disabled, or error states.

Do not assume the darkest color is the button color or that the most frequent color is the brand color. Large surfaces dominate frequency, while small controls often carry the strongest interaction meaning. Keep colors from photographs and one-off illustrations as exceptions unless you are documenting the visual treatment of those assets.

Review contrast for primary text on the main background, secondary text on surfaces, button text on action fills, links, placeholder text, borders, and focus indicators. Status colors should not rely on hue alone. Pair them with labels, icons, borders, or other visible cues.

## Turn observations into tokens

Use two layers. The first stores visual values, such as a dark green or softened neutral. The second assigns those values to jobs, such as `color.action.primary` or `color.text.muted`. This lets you revise a shade without losing the meaning attached to it.

Keep the first version small: one page background, two surfaces, two text colors, one border color, one primary accent, one stronger accent, and the required status colors. Add another token only when the page shows a real distinction that designers or developers need to preserve.

For a repeatable review, save the URL and page state, capture the page, list candidate colors, assign roles, check important combinations, and record exceptions such as gradients, transparency, or image-only colors. The result explains where each color belongs and what should happen when the interface changes.

## Use this in your AI agent

> Review the website at [paste URL]. Extract a practical color-role map for page backgrounds, surfaces, primary and secondary text, links, buttons, borders, status states, gradients, and decorative colors. For each role, list the observed hex values, where they appear, how often they are used, what content sits on top, and any hover, focus, selected, or disabled variation. Flag colors that appear only in images or one-off decoration. Check the most important text and control combinations for readable contrast, then return a compact semantic token set with confidence notes and exceptions. Compare the examples below for muted-green role patterns, but do not assume they describe the target page.

[Use Fudge with your AI agent](/mcp) to inspect the captured page and compare its color roles with other references.

---

Treat two colors as separate roles when changing one would alter a different user-facing meaning. A darker green used for headings may need to remain independent from a brighter green used for primary buttons. A border shade may also deserve its own role because it must stay subtle without weakening text or controls.

Keep colors under one family when the difference comes from a predictable tonal step, opacity, elevation, or interaction state. In that case, use one semantic role with variants such as `action.primary`, `action.primary.hover`, and `action.primary.disabled`.

Ask what would break if the colors were merged. If only visual nuance disappears, merge them initially. If hierarchy, interaction, status, or readability becomes less clear, keep them separate. Record the component, state, surrounding background, and repetition beside each decision.

---

Deliver four pieces: a role table, a compact token list, contrast notes, and an exceptions list. The role table should connect each semantic name to its observed value and examples, such as `text.primary` in headings and body copy or `surface.subtle` behind grouped content.

The token list can use CSS custom properties:

```css
:root {
  --color-bg: #ffffff;
  --color-surface-subtle: #f4f7f2;
  --color-text-primary: #233f2a;
  --color-text-secondary: #556659;
  --color-accent: #2c7a4a;
  --color-accent-strong: #15502e;
  --color-border-subtle: #799c92;
}
```

Replace these example values with values verified on the target page. Note which combinations need checking, especially small text, buttons, links, and focus states. Finally, list gradients, image-derived colors, transparency, and one-off illustrations separately so observed details are not mistaken for formal design tokens.

## Related questions

- [Extract a Website Gradient Palette from a URL](/share/extract-website-gradient-palette-from-a-url)
- [Inspect accessible CTA colors on a website](/share/tool-for-inspecting-accessible-cta-colors-on-a-website)
- [Extract Text and Background Contrast from a URL](/share/extract-text-and-background-contrast-from-a-url)
- [Inspect a website's dark mode color palette](/share/tool-for-inspecting-dark-mode-color-palette-on-a-website)