# Analyze a Dark Mode Color Palette on a Live Website

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

Last updated: 2026-08-25

A useful dark mode palette is more than a collection of dark hex codes: it needs clear surface levels, readable text, and accents that remain visible without becoming harsh. To analyze one on a live website, capture the page in its dark state, group colors by role, and check each role in context rather than judging the swatches alone.

## Start with roles, not hex codes

Make a short inventory with these roles:

- Page background
- Raised surface or card background
- Borders and dividers
- Primary text
- Secondary and muted text
- Primary action color
- Links and interactive states
- Success, warning, and error colors
- Illustration or decorative accents

For each color, note where it appears and whether it is used for text, a surface, an icon, or a status signal. This prevents a common mistake: treating every repeated color as a separate design token when several shades are really variations of the same role.

The examples below include a muted green direction with colors such as `#15502e`, `#14532d`, `#233f2a`, `#2c7a4a`, and `#799c92`. Compare them by role and placement. A deep green can work as an accent or surface, while a pale green-gray may be better for secondary text or a quiet highlight. The hex value alone does not tell you which use is appropriate.

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

## Check the dark-mode hierarchy

A strong dark interface usually creates hierarchy through small changes in lightness, not through many unrelated hues. Compare the page background with cards, menus, inputs, and modal surfaces. Ask:

1. Can you identify the main content area immediately?
2. Do raised surfaces look separate without appearing outlined everywhere?
3. Are borders visible only where they help grouping or interaction?
4. Does muted text recede while remaining readable?
5. Does the primary action stand out at a glance?

A useful worksheet has four columns: observed color, likely role, locations, and confidence. Mark uncertain roles instead of forcing a conclusion. For example, `#556659` and `#4a5a4a` may be neutralized green tones used for supporting text or borders, but their role should be confirmed by looking at the components where they appear.

## Test accents in real components

Inspect the green palette on buttons, links, focus states, badges, and icons. An accent that looks balanced as a large block may disappear when used for small text. Conversely, a bright accent that works for a short label may feel distracting across a large button or banner.

Check at least these states:

- Default
- Hover or pressed
- Keyboard focus
- Disabled
- Selected or active
- Error or success

Also check whether meaning depends on color alone. A warning should have a label, icon, pattern, or other cue, especially when several green shades are close enough to be confused.

## Turn observations into a usable palette

After reviewing the page, reduce the result to a small token set. A practical dark-mode draft might include `surface-0`, `surface-1`, `surface-2`, `text-primary`, `text-secondary`, `border-subtle`, `accent`, and `accent-strong`. Keep the observed hex values beside each token, but record the component examples that justify the assignment.

Then review the palette at three scales: the whole page, a single component, and the smallest text or icon that uses each color. If a color fails at one scale, do not automatically discard it. Change its role, darken or lighten the variant, or reserve it for larger elements.

One specific Fudge action helps here: inspect the captured page's color roles and usage, then compare the result with the examples below before borrowing a pattern. Treat the output as an observation of that page, not as an official design system owned by its original creator.

## Use this in your AI agent

> Analyze the dark mode palette of this captured website. Group observed colors into page backgrounds, raised surfaces, borders, primary and secondary text, actions, links, focus states, and status colors. For every group, list the hex values, where they appear, and whether the role is certain or inferred. Check the smallest text and icon uses for readability, compare default and interactive states, and finish with a compact dark-mode token table plus any roles that need manual verification.
>
> [Install Fudge for your AI agent](/mcp)

---

Compare the same color across several components instead of assigning a role from one screenshot. Background colors usually cover an area, repeat across cards or panels, and sit behind other content. Border colors tend to appear as thin lines around inputs, cards, or separators. Muted text colors occur inside glyphs and usually repeat on labels, metadata, helper text, or inactive controls.

Use placement and scale as evidence. A green-gray such as `#556659` could be a border when it appears as a one-pixel outline, but the same value could be muted text when it fills labels. Check whether the color changes between default, hover, focus, and disabled states. If two nearby shades appear in the same component, compare their lightness and frequency: the more visible shade may be primary content, while the quieter one may support it.

Record uncertain assignments in a table and test the proposed token in at least one component of each type. That gives you a palette that explains the page instead of a list of colors with guessed names.

---

Include a compact token table, usage notes, and a verification checklist. For each token, provide the proposed name, observed hex value, role, example locations, and whether the assignment is confirmed or inferred. A useful starter table is:

| Token | Role | Example |
| --- | --- | --- |
| surface-0 | Main page background | App shell or body |
| surface-1 | Raised content | Card or panel |
| text-primary | Main reading text | Heading or paragraph |
| text-secondary | Supporting text | Metadata or helper copy |
| border-subtle | Grouping edge | Input or divider |
| accent | Main interactive color | Button or link |

Add screenshots or captured examples for default, hover, focus, disabled, and error states. Note any color that changes meaning by component. Finally, ask the implementer to verify small text, icon visibility, focus visibility, and non-color cues before treating the draft as finished. This preserves the observed design while leaving room for deliberate improvements.

## Related questions

- [Analyze Text and Background Contrast on a Live Website](/share/analyze-text-and-background-contrast-on-a-live-website)
- [How to analyze accessible CTA colors on a live website](/share/analyze-accessible-cta-colors-on-a-live-website)
- [Analyze a Website Color Palette on a Live Website](/share/analyze-website-color-palette-on-a-live-website)
- [Turn a Website Gradient Palette Into Reusable Design Tokens](/share/turn-website-gradient-palette-into-reusable-design-tokens)