Check a Website Gradient Palette Inside Claude Code
Learn how to inspect website gradients, assign palette roles, check contrast, and turn observed colors into practical CSS guidance.
check website gradient palette inside claude code
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:
- Raw colors: list each observed hex value or color value.
- Roles: explain whether each color is used for a page background, surface, text, border, button, icon, or accent.
- Gradient stops: record the start color, end color, direction, and where the gradient appears.
- Usage: note which colors appear often and which are limited to small highlights.
- 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
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.
What should I ask Claude Code to return for a complete website color audit?
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.
How do I turn a checked gradient palette into CSS without pretending it is the site's design system?
Keep the observed values and your proposed tokens in separate groups. For example:
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.