Check a Website Color Palette Inside Claude Code

You can check a website's color palette inside Claude Code by connecting Fudge, opening a captured page, and asking for the visible colors with their observed uses. A useful review does more than list hex values. It explains which colors appear to serve as backgrounds, surfaces, text, borders, buttons, links, or accents, and it separates interface colors from colors found only in images or artwork.

A practical palette review

Use this sequence:

1. Capture or open the website you want to review.
2. Ask Claude Code to inspect the page's visible colors and group them by likely role.
3. Separate repeated interface colors from one-off colors in photographs, illustrations, and gradients.
4. Check important text and controls against their backgrounds.
5. Save the result as a compact palette table for design or implementation.

Try this request:

> Inspect the captured website's visible color palette. Return the most repeated colors, likely roles such as page background, surface, text, border, primary action, and accent, plus notes about where each color appears. Flag combinations that need a contrast check. Do not treat colors from photographs as interface colors unless they are reused in the UI.

This keeps the review tied to what is visible on the page. It also avoids copying every color from a screenshot when many belong only to content or decoration.

The references below include Claude Code, Notion Developer Platform, and Exa MCP Server. Their accompanying colors include greens and muted supporting tones. Use these as observed examples for comparison, not as a universal palette.

Turn colors into useful roles

Give every retained color four notes: hex value, likely role, observed location, and confidence. Useful role names include:

• Canvas: the main page or app background.
• Surface: cards, panels, navigation areas, and raised sections.
• Text: headings, body copy, muted labels, and disabled text.
• Action: buttons, links, selected states, and focus indicators.
• Border: dividers, input outlines, card edges, and separators.
• Accent: highlights, badges, illustrations, and occasional emphasis.

Do not assume the most frequent color is the brand color. Large backgrounds naturally occupy much of a page. Repeated use across buttons, links, headings, icons, and states is stronger evidence of an interface color.

Check accessibility before copying

Review combinations visitors must use: body text on the canvas, muted text on surfaces, button labels on action colors, links in paragraphs, placeholder text in fields, and focus rings on light and dark areas. If a color fails as text, it may still work as a border, fill, illustration, or decorative accent. Adjust lightness or choose a different foreground for reading tasks.

Prepare a handoff

Return a small table with Token, Color, Use, Location, Confidence, and Check columns. Keep one primary action color, a small text hierarchy, and only supporting colors that repeat. This makes the result easier to implement and review.

Use this in your AI agent

> Inside Claude Code, inspect the captured website's visible colors. Build a compact palette table with hex values, likely interface roles, locations, repeated versus one-off usage, and contrast checks for text, buttons, links, borders, and focus states. Exclude colors that appear only in photos or decorative artwork, and clearly label uncertain roles.

Install Fudge for your AI agent

Ask Claude Code to classify each color by repeated interface use, not just by frequency. A likely reusable color appears in several components, such as a button, link, icon, heading, border, or selected state.

Use three buckets:

1. Reusable token: appears across several interface elements or sections.
2. Contextual color: belongs to one component, such as a warning badge or callout.
3. Content color: comes from an image, video, illustration, gradient, or decoration.

Compare the locations as well as the values. A dark green used for buttons and links is a stronger action-color candidate than a dark green found only in a hero image. Keep uncertain colors in a review list instead of forcing them into the final palette.

Use this prompt:

> For every extracted color, list the distinct interface contexts where it appears. Mark it reusable, contextual, or content-derived. Explain the evidence briefly and do not promote a color to a design token unless it repeats in the interface.

Ask for a compact handoff combining observed colors, roles, locations, and checks. For each color, request:

• A neutral token name, if the role is clear.
• The hex value.
• Likely role, such as canvas, surface, text, action, border, or accent.
• Components and sections where it appears.
• Whether it repeats or appears once.
• Contrast concerns and unresolved uncertainty.

Then request a short summary of the page's color strategy, including the dominant hue family, background approach, text hierarchy, action treatment, and light or dark sections. Finish with a checklist of combinations that still need manual review.

Use this final request:

> Return a developer-ready color handoff in Markdown. Include a token table, observed component usage, repeated versus one-off colors, contrast checks for essential text and controls, unresolved questions, and a five-item implementation checklist. Base every claim on the captured page and label assumptions.

Related questions

• Check Website Color Roles Inside Claude Code
• Check Text and Background Contrast in Claude Code
• Check a Website Gradient Palette Inside Claude Code
• Check a Dark Mode Color Palette in Claude Code