# Analyze a Website Gradient Palette

[Open the live Fudge conversation](https://design.withfudge.com/share/analyze-website-gradient-palette-on-a-live-website)

Last updated: 2026-08-25

To analyze a website gradient palette, capture the exact page state, list the visible color stops, and assign each color a job such as background, surface, text, accent, or transition. Then check whether the gradient supports readable text and usable controls across its lightest and darkest areas.

## Capture and separate the colors

Start with the live page, viewport, and state you want to study. Gradients can change between the hero, cards, navigation, hover states, and responsive layouts. Record whether the gradient sits over an image, tint, overlay, blur, or solid background.

Then separate solid colors from gradient stops. For each gradient, note the visible start and end colors, any middle stops, direction, approximate positions, and the area where it appears. Do not treat every sampled hex value as an equally important brand color. A color may be a functional surface, a text color, or only a transition between two decorative tones.

The captured muted green direction below includes colors such as `#496c10`, `#15502e`, `#14532d`, `#233f2a`, and `#2a966f`, with softer supporting tones including `#556659`, `#4a5a4a`, and `#799c92`. Treat these as observed reference colors, not as a ready-made replacement for the palette on your own 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`

## Assign roles and read the hierarchy

A useful palette has a hierarchy. One or two colors may carry the main identity. Darker tones can support headings, navigation, or high-contrast buttons. Mid greens may work as accents or illustrations. Pale gray-green values may provide surfaces or dividers, but they need a contrast check before being used for important labels.

For each gradient, write down:

- **Direction:** left to right, top to bottom, diagonal, or radial.
- **Stops:** color and approximate position of each stop.
- **Coverage:** sections or components where it appears.
- **Overlay:** text, image, transparency, blur, or another layer above it.
- **Role:** functional surface, text support, action treatment, or decoration.

This prevents a common mistake: copying attractive hex values while losing the balance that made the original page feel consistent. Keep observed roles separate from recommendations, especially when the live page does not expose every state or theme.

## Check contrast at the extremes

Check large headings, body text, links, icons, form labels, and primary buttons separately. Test the brightest, darkest, most saturated, and least saturated points behind each element. A label that works in the center may disappear near an edge or where a stop changes quickly.

Check states too. Hover, focus, disabled, and selected controls may add a fill, border, or overlay that changes the pairing. If readability changes across the text box, reduce the gradient range, move the content, add a translucent or solid backing, or choose a stronger text color. Keep button contrast separate from headline contrast because a button may need a defined fill even when the heading is readable directly on the gradient.

Also inspect the mobile layout. Text wrapping can place words over different stops, and a gradient that looks stable on desktop may become difficult to read after the layout changes.

## Save a reusable palette record

Use a compact handoff format:

```text
Palette name:
Primary colors:
Supporting colors:
Gradient recipe:
Used on:
Text colors that remain readable:
Controls that need a solid backing:
Open questions:
```

If you are turning the result into tokens, use names based on repeated jobs rather than screenshot positions. For example, `color-brand-dark`, `color-brand-mid`, `color-surface-muted`, `color-text-strong`, and `color-accent-soft` are easier to reuse than `hero-left-green`.

Do not promote every sampled shade into a permanent token. Keep a color if it has a repeated role, supports a state, or is required by the gradient. Record where each token is safe to use, especially if it is too light for body text or too saturated for large surfaces.

Fudge lets you help inspect color roles, frequency, contrast, spacing, borders, radii, shadows, and gradients on a captured page, giving you visible page evidence to compare with your own notes.

## Use this in your AI agent

> Analyze the gradient palette on this captured live website. List the visible gradient stops and solid colors, assign each color a role, describe where each one is used, and flag text or controls that may lose contrast. Return a compact palette with hex values, gradient direction, stop order, approximate positions, and practical reuse notes. Separate observed colors from recommendations.

[Use Fudge with your AI agent](/mcp) to inspect the captured page and compare its gradient, roles, and contrast pairings.

---

Start with role-based names instead of names tied to a single screenshot. For example, use `color-brand-dark`, `color-brand-mid`, `color-surface-muted`, `color-text-strong`, and `color-accent-soft`. Keep the original hex values beside the names so the source remains traceable.

Define the gradient separately from the colors:

```css
:root {
  --color-brand-dark: #15502e;
  --color-brand-mid: #2c7a4a;
  --color-accent-soft: #799c92;
  --gradient-brand: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-mid));
}
```

Do not promote every sampled shade into a permanent token. Keep a color if it has a repeated role, supports a state, or is required by the gradient. For each token, record where it is safe to use, especially if it is too light for body text or too saturated for large backgrounds. This keeps the extracted palette useful without pretending the source page has an official internal design system.

---

Check the headline at every point where its text box overlaps the gradient, not only at the center. Test the strongest light area, strongest dark area, and any point where a second color stop changes quickly. Include the subtitle, button label, icons, and focus outline in the same review.

If readability changes across the headline, use one of four fixes: reduce the gradient range, move the text to a more stable area, add a translucent or solid backing, or use a text color with stronger contrast. Keep the button contrast separate from the headline because a button may need a defined fill even when the heading is readable directly on the background. Recheck the mobile layout too, since responsive text wrapping can place words over different gradient stops.

## Related questions

- [How to check accessible CTA colors inside Claude Code](/share/check-accessible-cta-colors-inside-claude-code)
- [Analyze Website Color Roles on a Live Website](/share/analyze-website-color-roles-on-a-live-website)
- [Check a Dark Mode Color Palette in Claude Code](/share/check-dark-mode-color-palette-inside-claude-code)
- [Check Text and Background Contrast in Claude Code](/share/check-text-and-background-contrast-inside-claude-code)