# Turn a Website Gradient Palette Into Reusable Design Tokens

[Open the live Fudge conversation](https://design.withfudge.com/share/turn-website-gradient-palette-into-reusable-design-tokens)

Last updated: 2026-08-25

Turn a website gradient palette into reusable design tokens by separating observed colors from their roles, choosing a compact set of approved values, and testing every important text and control state. A sampled palette is evidence, not automatically a finished design system.

## Start with roles, not hex codes

Give each color a job such as `page-bg`, `surface`, `text-primary`, `text-muted`, `border-subtle`, `accent`, `accent-strong`, `gradient-start`, or `gradient-end`. Names should describe how a value is used, not where it was sampled.

The captured muted-green example includes `#496c10`, `#15502e`, `#14532d`, `#233f2a`, `#254f1a`, `#1e6f30`, `#295631`, `#556659`, `#4a5a4a`, `#2c7a4a`, `#2a966f`, and `#799c92`. Treat these as observed candidates. Decide which values are suitable for text, surfaces, accents, or gradient stops only after checking them in their actual context.

Keep one neutral scale, one accent scale, and a small number of gradient recipes. If several greens serve the same purpose, choose the clearest value and keep the others in a reference list instead of creating unnecessary permanent tokens.

## 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 token table

| Role | Token | Typical use |
| --- | --- | --- |
| Page background | `--color-bg` | Main canvas |
| Surface | `--color-surface` | Cards, panels, and inputs |
| Primary text | `--color-text` | Headings and essential content |
| Muted text | `--color-text-muted` | Supporting copy and metadata |
| Border | `--color-border` | Dividers and field outlines |
| Accent | `--color-accent` | Links, icons, and selected states |
| Strong accent | `--color-accent-strong` | Active and high-emphasis controls |
| Gradient | `--gradient-brand` | Shared decorative treatment |

Map the approved values in one place:

```css
:root {
  --color-bg: #f7faf7;
  --color-surface: #ffffff;
  --color-text: #233f2a;
  --color-text-muted: #556659;
  --color-border: #799c92;
  --color-accent: #2c7a4a;
  --color-accent-strong: #15502e;
  --gradient-brand: linear-gradient(135deg, #14532d, #2a966f);
}
```

This is a proposed mapping, not a claim about the captured site's internal tokens. Keep observed values separate from approved project values until review is complete.

## Check contrast and gradient behavior

A gradient can look strong while making text unreadable in part of the blend. Test every overlaid label at its smallest size across the lightest and darkest areas. If contrast changes too much, place the text on a solid or translucent surface, add a controlled overlay, or restrict it to a stable region.

Test body text, links, buttons, keyboard focus, hover, disabled, and error states. Review the gradient in cards, long sections, controls, and decorative areas. Include direction and stop positions in the token, not only the two colors. If a gradient appears once, keep it local to that component.

## Keep the system maintainable

Store the role table beside the CSS or Tailwind configuration. Record the observed source, proposed value, approved value, usage examples, contrast notes, and owner. When a color changes, update the role token instead of searching for repeated raw hex values.

Review real widths and content lengths so gradients, wrapping, borders, and focus states continue to work together. Use the captured example as a reference, then approve only the values that fit your own interface.

## Use this in your AI agent

> Inspect [WEBSITE OR CAPTURE] and turn its observed colors and gradients into a compact token table. Group colors by role, identify visible gradient stops and directions, flag duplicate or uncertain values, and return CSS custom properties plus Tailwind v4-compatible names. Include contrast checks for text, links, buttons, focus states, and overlays. Keep observed colors separate from approved tokens and do not invent usage claims.

[Install Fudge for your AI agent](/mcp) to compare captured color references and organize the palette into a practical review list.

---

Keep the smallest set that covers the roles your interface actually uses. A useful first pass is one page background, one or two surfaces, two text colors, one border color, three accent strengths, and two to four gradient recipes. Add success, warning, and error tokens only when those states exist.

Group nearby colors by function. Keep one value for primary text, one for muted text, one for the main accent, and one stronger accent for emphasis. Nearby shades can stay in a reference table without becoming public tokens.

Create a new token when a value has a distinct role, contrast requirement, or component behavior. Names such as `text-muted` and `gradient-brand-end` make later changes safer than names such as `green-7`.

---

Hand over the observed color list, a role-based token table, gradient definitions, contrast notes, and a small usage sample.

For each token, include its name, value, intended role, and example uses. For each gradient, include direction, stop positions, and approved surfaces. Mark each value as observed, proposed, or approved so a sample is not mistaken for a final decision.

Add a QA checklist covering body text, small labels, links on every background, button states, keyboard focus, error and disabled states, light and dark surfaces, and narrow screens. Ask the developer to use role tokens in components rather than repeating raw hex values.

## Related questions

- [How to analyze accessible CTA colors on a live website](/share/analyze-accessible-cta-colors-on-a-live-website)
- [Turn Website Color Roles Into Reusable Design Tokens](/share/turn-website-color-roles-into-reusable-design-tokens)
- [Analyze a Dark Mode Color Palette on a Live Website](/share/analyze-dark-mode-color-palette-on-a-live-website)
- [Analyze Text and Background Contrast on a Live Website](/share/analyze-text-and-background-contrast-on-a-live-website)