# A tool for inspecting a website's color palette

[Open the live Fudge conversation](https://design.withfudge.com/share/tool-for-inspecting-website-color-palette-on-a-website)

Last updated: 2026-08-25

The best tool for inspecting a website color palette should do more than list hex codes: it should show which colors repeat, where they appear, and whether they belong to text, backgrounds, borders, buttons, or accents. Use a page capture or browser inspection tool, then reduce the result to a small palette with clear roles instead of copying every color it detects.

## A practical way to inspect the palette

Start with the page you want to study and record these five things:

1. **The main background colors**: page background, card surfaces, navigation areas, and footer.
2. **The main text colors**: separate strong heading text from muted body text or metadata.
3. **The action color**: buttons, links, selected states, and other controls may share one accent.
4. **The supporting colors**: borders, dividers, badges, icons, and subtle highlights.
5. **The frequency and placement**: a color used across a large surface has a different role from one used only in a small icon.

Open the example below and compare the first screen before borrowing a pattern. The Pangram AI Detector reference is paired with a muted green set that includes `#496c10`, `#15502e`, `#14532d`, `#233f2a`, and `#799c92`. Treat that list as an observed starting point, not as a finished design system. The useful question is where each green appears and whether the lighter values are reserved for supporting UI.

## 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`

## Turn raw colors into usable roles

A palette becomes easier to use when every color has a job. A simple role table works well:

| Role | What to look for | Example use |
| --- | --- | --- |
| Canvas | The largest light or dark surface | Page background |
| Surface | A nearby color that separates content | Cards and panels |
| Primary text | The strongest readable tone | Headings and key labels |
| Secondary text | A softer tone that remains readable | Descriptions and metadata |
| Brand accent | The most recognizable repeated color | Links and primary buttons |
| Accent emphasis | A darker or brighter version | Hover, active, or selected states |
| Border | A low-contrast separator | Inputs, cards, and dividers |

Do not assume that the most saturated color is the primary brand color. A strong color may be used only for calls to action, while a darker related color handles headings or navigation. Compare repeated values and their location before naming a role. Mark inferred roles as unverified until the page gives you enough evidence.

## Check whether the palette works

After collecting the colors, test the combinations people will actually see. Check heading text against the page background, body text against cards, button labels against button fills, and links against the surrounding surface. Also check hover, focus, disabled, and selected states. A palette can look cohesive while still making small text difficult to read.

Look for near-duplicates too. If several colors differ by only a few RGB values, they may come from anti-aliasing, image content, or layered transparency. Keep them separate only when they serve visibly different purposes. Otherwise, consolidate them into one token and document the exception.

## Save a palette you can use

Before reusing the result, confirm that you have:

- One clear canvas color.
- One or two surface colors.
- A readable primary text color.
- A readable secondary text color.
- One main action color and, if needed, a darker state color.
- Border and divider values that do not overpower the content.
- Light and dark combinations checked at their actual text sizes.
- Notes about where each color was observed.

For a repeatable workflow, capture the page, inspect its colors and usage, compare it with another reference, then save only the roles that survive that comparison. A Fudge color inspection is useful when you need observed colors tied to page usage rather than a loose color-picker list. The final palette should explain how to build the interface, not merely how to reproduce one screenshot.

## Use this in your AI agent

> Inspect the captured website's color palette. Return the most repeated colors, their observed roles, where they appear, approximate frequency, and any useful contrast pairings. Group near-duplicate colors, separate surface, text, accent, border, and state colors, and finish with a compact CSS variable palette plus notes about what should be verified before reuse.

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

---

Treat each color as a combination of value and job. For every repeated color, record the element type, surface behind it, text size if applicable, state, and how often it appears. That lets you distinguish a primary action color from a decorative accent or an image-derived color.

A useful worksheet has these columns: `hex`, `role`, `element`, `surface`, `state`, `frequency`, and `contrast check`. Start with large regions, then buttons and links, then borders, icons, and status elements. If the same green appears in a logo, button, and heading, do not automatically give it one token. It may need separate roles or shades.

For the captured example, use the muted green colors as a comparison set and ask where the darker greens do structural work while lighter values support secondary details. That is more useful than treating all twelve colors as equally important. Keep an explicit `unverified` note for any role inferred from appearance rather than confirmed through repeated usage.

---

Use this compact template:

```md
# Website palette

## Canvas and surfaces
- canvas: #______ - observed on ______
- surface-1: #______ - observed on ______
- surface-2: #______ - observed on ______

## Text
- text-primary: #______ - used for ______
- text-secondary: #______ - used for ______

## Actions and states
- accent: #______ - used for ______
- accent-strong: #______ - used for ______
- focus-or-selected: #______ - used for ______

## Supporting UI
- border: #______ - used for ______
- muted-fill: #______ - used for ______

## Checks
- heading contrast: pass / review
- body contrast: pass / review
- button label contrast: pass / review
- near-duplicate colors to consolidate: ______
- roles that still need verification: ______
```

Add a screenshot or page reference beside each role when you can. If you later export the values to CSS, keep these human-readable notes beside the variables so another designer can tell why each color exists.

## Related questions

- [A tool for inspecting website color roles](/share/tool-for-inspecting-website-color-roles-on-a-website)
- [Inspect Text and Background Contrast on a Website](/share/tool-for-inspecting-text-and-background-contrast-on-a-website)
- [Inspect a Website's Gradient Palette and Color Use](/share/tool-for-inspecting-website-gradient-palette-on-a-website)
- [Inspect a website's dark mode color palette](/share/tool-for-inspecting-dark-mode-color-palette-on-a-website)