# Check a Website Gradient Palette Inside Claude Code

[Open the live Fudge conversation](https://design.withfudge.com/share/check-website-gradient-palette-inside-claude-code)

Last updated: 2026-08-25

To check a website gradient palette inside Claude Code, connect Fudge as an MCP server and ask Claude to inspect the captured page's colors, gradients, roles, frequency, and contrast. You can then turn the observations into a practical palette with background, surface, text, border, accent, and gradient stops.

## Use this palette-check method

Ask for the result in five parts:

1. **Raw colors**: list each observed hex value or color value.
2. **Roles**: explain whether each color is used for a page background, surface, text, border, button, icon, or accent.
3. **Gradient stops**: record the start color, end color, direction, and where the gradient appears.
4. **Usage**: note which colors appear often and which are limited to small highlights.
5. **Contrast checks**: identify text or controls that may need a darker, lighter, or more saturated alternative.

This keeps a gradient from being treated as a random pair of attractive colors. A page can use the same hue family in several different jobs, but those uses still need enough separation for text, controls, cards, and decoration.

Open the examples below and compare the first screen before borrowing a pattern. The saved color set includes deep green values such as `#14532d`, `#15502e`, and `#233f2a`, along with lighter supporting tones such as `#2a966f` and `#799c92`. Treat those as observed references, not as a ready-made palette for every site.

## Captured pages

[![Notion Developer Platform](https://pin.fontofweb.com/9283?format=jpg)](https://design.withfudge.com/share/pin-9283)

[Notion Developer Platform](https://design.withfudge.com/share/pin-9283)

[![Claude Code](https://pin.fontofweb.com/1446?format=jpg)](https://design.withfudge.com/share/pin-1446)

[Claude Code](https://design.withfudge.com/share/pin-1446)

[![Exa MCP Server](https://pin.fontofweb.com/6429?format=jpg)](https://design.withfudge.com/share/pin-6429)

[Exa MCP Server](https://design.withfudge.com/share/pin-6429)

## Colors

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

## Turn the observations into a palette

Start with a short role table:

| Role | What to record | Good question |
|---|---|---|
| Page background | Main canvas color | Does it support long-form reading? |
| Surface | Cards, panels, or nav areas | Is it distinct from the background? |
| Main text | Primary headings and copy | Does it stay readable at normal size? |
| Muted text | Secondary labels and hints | Is it still readable, or only decorative? |
| Border | Dividers and input edges | Does it separate areas without becoming noisy? |
| Accent | Links, buttons, highlights | Is it reserved for actions and emphasis? |
| Gradient | Stops and direction | Does it guide attention or only add atmosphere? |

For each gradient, capture more than the two endpoints. Note whether it runs left to right, top to bottom, diagonally, or through a radial glow. Also record whether it sits behind text, inside a button, across a hero section, or on a decorative shape. Placement changes how strong the colors feel.

## Check contrast before copying the look

Do not judge contrast from the palette swatches alone. Check the actual pairing: text against its background, icons against buttons, labels inside gradient areas, and borders against surrounding surfaces. A bright gradient can make one part of a heading readable and another part hard to see.

A useful review labels each pairing as:

- **Keep**: readable and visually consistent.
- **Adjust**: readable only in some parts of the gradient or at larger sizes.
- **Replace**: too faint for important text, controls, or status information.

Then suggest the smallest change. For example, keep the gradient but add a surface overlay, use a solid text color, move the copy away from the brightest stop, or reserve the gradient for decoration.

## Use this in your AI agent

> Inspect the captured website's gradient palette. Return raw colors, gradient stops and direction, color roles, approximate usage, and contrast concerns for text and controls. Finish with a small CSS variable table and separate observed values from recommendations.

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

---

Ask for a structured audit that separates observation from recommendation:

> Audit the captured website's colors. List the page background, surfaces, text colors, muted text, borders, accents, buttons, icons, and decorative colors. For each color, include its hex or CSS value, where it appears, and whether it is used broadly or sparingly. For every gradient, include all visible stops, direction, approximate location, and the content placed over it. Check text, icons, controls, and borders against their actual backgrounds. Mark each pairing Keep, Adjust, or Replace, and explain the smallest useful change. End with CSS variables for the observed values and a separate recommended palette.

This wording prevents a vague list of swatches. It also asks for context, which is essential when the same green or blue appears as a background in one section and as small text in another.

---

Keep the observed values and your proposed tokens in separate groups. For example:

```css
/* Observed on the captured page */
:root {
  --observed-bg: #233f2a;
  --observed-accent: #2a966f;
  --observed-gradient-start: #15502e;
  --observed-gradient-end: #799c92;
}

/* Proposed working tokens */
:root {
  --color-bg: var(--observed-bg);
  --color-accent: var(--observed-accent);
  --gradient-hero: linear-gradient(135deg, var(--observed-gradient-start), var(--observed-gradient-end));
}
```

Use names based on the job each value performs, not its appearance. `--color-surface` is more useful than `--dark-green` when the palette evolves. Keep a note of where each value was observed, then retest contrast after changing font size, weight, overlay opacity, or gradient direction. That turns the capture into a working starting point without claiming ownership of an official internal token set.

## Related questions

- [Extract Accessible CTA Colors from a URL](/share/extract-accessible-cta-colors-from-a-url)
- [Check Website Color Roles Inside Claude Code](/share/check-website-color-roles-inside-claude-code)
- [Extract a Dark Mode Color Palette from a URL](/share/extract-dark-mode-color-palette-from-a-url)
- [Extract Text and Background Contrast from a URL](/share/extract-text-and-background-contrast-from-a-url)