# Check Website Color Roles Inside Claude Code [Open the live Fudge conversation](https://design.withfudge.com/share/check-website-color-roles-inside-claude-code) Last updated: 2026-08-25 You can check website color roles inside Claude Code by connecting Fudge, opening a captured page, and asking where each observed color appears. The goal is to distinguish canvas, surfaces, text, actions, borders, states, and accents so the palette becomes useful for implementation and review. ## Start with roles, not hex codes A color's role depends on its job and location. Review the page in this order: 1. Identify the main canvas and large background areas. 2. Find surfaces such as cards, panels, navigation, and input fields. 3. Separate primary text, secondary text, links, and disabled states. 4. Locate action colors in buttons, selected controls, and focus states. 5. Record borders, dividers, badges, and decorative accents separately. Ask Claude Code to show evidence beside every role: > Inspect the captured website and map its observed colors to interface roles. For each color, return the hex value, likely role, component or section where it appears, whether it repeats, and your confidence. Separate interface colors from colors found only in images, video, gradients, or illustrations. A green might be a primary button, a page background, a success state, or part of a photograph. The surrounding component and repeated use provide the context. The references below include Notion Developer Platform, Claude Code, and Exa MCP Server. The observed colors include dark greens and muted supporting tones. Use them to study relationships between accents and softer tones, not as proof of any particular brand system. ## 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` ## Build a role map Use a table with Role, Color, Locations, Repetition, Confidence, and Contrast Pairings columns. Cover canvas, surface, primary text, secondary text, action, border, state, and accent. If the same green appears in a header button, inline links, and selected navigation item, it is a stronger action-color candidate than a green seen once in a decorative panel. If two similar grays appear in different states, record that distinction only when the page uses it consistently. ## Check combinations, not isolated swatches Review primary text on the canvas, secondary text on surfaces, button labels on action fills, links in body copy, borders against adjacent backgrounds, and focus indicators against light and dark areas. A color that is too light for body text may still work as a background tint. A dark action color may suit buttons but be too strong for long paragraphs. Also separate content colors from interface colors. Photograph and illustration colors can guide inspiration, but they should not become shared interface variables unless the page visibly reuses them in controls or layout elements. ## Make the review useful to developers Ask for two outputs: a role table and an implementation checklist. The table should list observed colors, roles, locations, repetition, and important pairings. The checklist should identify colors that can become shared variables, state values that need separate treatment, and combinations requiring human review. Include an uncertainty section with labels such as clear, likely, and unclear. This describes what appears on the captured page without claiming access to the site's private design rules. ## Use this in your AI agent > Inside Claude Code, inspect the captured website's color roles. Return a Markdown role map covering canvas, surfaces, primary and secondary text, links, actions, borders, states, and accents. For each color include hex value, observed locations, repeated usage, confidence, and essential contrast pairings. Separate interface colors from content-derived colors and mark any inferred role as unverified. [Install Fudge for your AI agent](/mcp) --- Compare the roles first and the hex values second. Two websites may use different hues for the same job, while similar-looking colors may serve different purposes. Create one row per role for each website: canvas, surface, primary text, secondary text, action, border, state, and accent. Compare: - Whether each page uses a light, dark, or mixed canvas. - How much separation exists between canvas and surfaces. - Whether actions use one consistent color or several state colors. - How muted text differs from borders. - Whether accents are structural or mainly decorative. Use this prompt: > Compare the two captured websites by color role, not by brand preference. Build a table with one column per site for canvas, surface, text, action, border, state, and accent colors. Describe where the roles match, where they differ, and which differences affect readability or component hierarchy. Keep each site's colors separate. End by listing general interface patterns that could be borrowed and colors that should remain specific to each reference. --- Use neutral variable names based on observed function, and label the file as a reference mapping. Names such as `--color-canvas`, `--color-surface`, `--color-text`, `--color-text-muted`, `--color-action`, and `--color-border` describe what the colors do without claiming access to the original system. For each variable, keep a comment with the observed hex value, page location, and confidence. Add state variables only when the page clearly distinguishes them, such as `--color-action-hover` or `--color-focus`. Do not invent a complete shade scale when the reference shows only one or two values. Ask Claude Code: > Convert the observed color-role table into CSS custom properties using neutral functional names. Include comments for page location, repeated usage, and confidence. Add state variables only when distinct states are visibly supported. Mark the output as an observed reference mapping, not an official internal design system. Then test the variables in your own components. A color that works on the reference page may need adjustment when your font size, spacing, content length, or component shape changes. ## Related questions - [Check a Website Gradient Palette Inside Claude Code](/share/check-website-gradient-palette-inside-claude-code) - [Extract Accessible CTA Colors from a URL](/share/extract-accessible-cta-colors-from-a-url) - [Check Text and Background Contrast in Claude Code](/share/check-text-and-background-contrast-inside-claude-code) - [Extract a Dark Mode Color Palette from a URL](/share/extract-dark-mode-color-palette-from-a-url)