# Extract a Dark Mode Color Palette from a URL

[Open the live Fudge conversation](https://design.withfudge.com/share/extract-dark-mode-color-palette-from-a-url)

Last updated: 2026-08-25

To extract a dark mode color palette from a URL, collect the page's dark surfaces, text colors, accents, borders, and interactive states, then label each value by where it is used. A good dark palette is a set of tested combinations, not a collection of dark hex codes.

## Start with the surface hierarchy

Record the colors in order from deepest to lightest surface:

1. Page background.
2. Header, navigation, or side-panel background.
3. Card and input surfaces.
4. Elevated menus, dialogs, and popovers.
5. Borders, dividers, and focus rings.
6. Primary and secondary text.
7. Links, icons, status colors, and CTA accents.

This hierarchy matters because dark interfaces often use several near-black surfaces. If they are all treated as one background, cards can disappear and controls can lose their edges. Save the location and role with each extracted value so you know whether a color belongs to the page, a component, or a state.

Open the examples below and compare their color direction with the page you are reviewing. The captured reference includes a muted green range such as `#233f2a`, `#254f1a`, `#1e6f30`, `#295631`, `#2c7a4a`, and `#2a966f`, along with softer values including `#556659`, `#4a5a4a`, and `#799c92`. Use these as observed examples for comparison, not as a ready-made dark theme for an unrelated site.

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

## Extract roles from real components

Do not sample only the largest blocks. Check a navigation link, heading, body paragraph, input, card, primary CTA, secondary CTA, notification, and focus state. For each component, capture:

- Foreground color
- Background or surface color
- Border color
- Hover and pressed changes
- Focus indicator
- Disabled treatment

A dark mode palette commonly needs more than one text role. Use separate names for primary text, secondary text, placeholder text, link text, and inactive labels. A muted gray that works for helper text may be too weak for a button label or form field value.

The same applies to green, blue, or orange accents. An accent may be bright enough for a link but too bright as a large filled surface. It may also need a different text color when used as a button background. Keep those uses separate until each pairing is checked.

## Check contrast and separation

Review foreground and background pairs at their actual size. Check body text, small labels, buttons, links, input text, icons that carry meaning, and focus indicators. Then check neighboring surfaces for separation. A card can have readable text and still be hard to find if its border and background are almost identical to the page behind it.

Use a table to keep the review actionable:

| Role | Foreground | Surface | What to verify |
| --- | --- | --- | --- |
| Primary text | Light text | Page background | Normal reading size |
| Secondary text | Muted text | Card surface | Small labels and metadata |
| Primary CTA | Button label | Accent fill | Default and hover states |
| Input | Value or placeholder | Input surface | Empty and filled states |
| Focus | Ring color | Component and page | Visibility around both edges |

Avoid making dark mode by simply inverting the light palette. Inversion often produces harsh white surfaces, weak borders, and accents that lose their intended hierarchy. Instead, preserve the relationship between roles while choosing dark surfaces and lighter text deliberately.

## Turn the result into a usable palette

Organize the final values into groups such as `surface-page`, `surface-card`, `surface-elevated`, `text-primary`, `text-secondary`, `accent-primary`, `cta-primary-bg`, `cta-primary-text`, `border-subtle`, and `focus-ring`. Include a note about the component and state each token came from.

Keep a separate list for values that appear in the capture but are not ready for reuse. Frequency does not prove that a color is suitable for text, buttons, or borders. The final palette should explain both what each color is and what it should not be used for.

Before handing it off, compare the dark palette beside the original page. Confirm that hierarchy, component grouping, CTA emphasis, and focus visibility still make sense. If you are adapting the palette to a new interface, recheck every combination in the new layout rather than copying the values unchanged.

## Use this in your AI agent

> Extract the dark mode palette from this URL. Identify page, navigation, card, input, elevated, border, text, link, status, CTA, hover, pressed, disabled, and focus colors. Group values by role and component, compare each important foreground-background pair for contrast and separation, flag uncertain combinations, and return a compact dark theme token list with usage notes. Do not create a final design system from isolated swatches.

[Install Fudge for your AI agent](/mcp) when you want to inspect a captured page's dark surfaces, components, and color use together.

---

Start with the values that establish structure and reading order: page background, main surface, card surface, elevated surface, primary text, secondary text, border, and focus ring. These tell you whether the interface is organized before you spend time on accent colors.

Next, capture the primary CTA, secondary CTA, links, icons, inputs, and status colors. Include normal and interactive states. A dark interface may use one green for a button fill, another for a link, and a softer green for supporting text. Those values should not be merged until their pairings are reviewed.

For each sample, write down where it appears and what sits behind it. `#2a966f` as a large accent surface has a different job from `#2a966f` used for a small link. The surrounding surface can also change whether a border or focus ring is visible.

A practical first-pass inventory is 10 to 15 roles, not every pixel on the page. Once those roles are clear, add exceptions for dialogs, selected navigation, warnings, success states, and disabled controls.

---

Keep the original relationships visible while renaming values by job. Start with surface tokens such as `surface-page`, `surface-card`, and `surface-elevated`, then add text, border, accent, CTA, status, and focus tokens. Record the source component and state beside each value.

Do not collapse near-duplicate surfaces too early. Two dark grays may look interchangeable in a swatch list but distinguish a card from a modal when they are placed in context. Likewise, a muted green may be appropriate for a supporting label but too weak for an interactive link.

For each token, document at least one approved pairing and one restriction. For example, a secondary text token can be approved on a card surface but rejected for button labels. This prevents the palette from becoming a bag of reusable colors with no guidance.

Finish by testing the tokens in representative screens: a dense settings page, a content card, a form, a modal, and a CTA area. Check reading order, surface separation, focus visibility, and state changes. The extracted values describe the observed page; the token rules are the decisions you make when adapting it.

## Related questions

- [Extract Text and Background Contrast from a URL](/share/extract-text-and-background-contrast-from-a-url)
- [Extract Accessible CTA Colors from a URL](/share/extract-accessible-cta-colors-from-a-url)
- [Extract a Website Color Palette from a URL](/share/extract-website-color-palette-from-a-url)
- [Check a Website Gradient Palette Inside Claude Code](/share/check-website-gradient-palette-inside-claude-code)