Extract a Dark Mode Color Palette from a URL
Learn how to extract dark mode colors from a website, label their roles, and check text, CTA, border, and surface contrast before reuse.
extract dark mode color palette from a url
Contents
- [Start with the surface hierarchy](#start-with-the-surface-hierarchy)
- [Extract roles from real components](#extract-roles-from-real-components)
- [Check contrast and separation](#check-contrast-and-separation)
- [Turn the result into a usable palette](#turn-the-result-into-a-usable-palette)
- [Use this in your AI agent](#use-this-in-your-ai-agent)
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:
- Page background.
- Header, navigation, or side-panel background.
- Card and input surfaces.
- Elevated menus, dialogs, and popovers.
- Borders, dividers, and focus rings.
- Primary and secondary text.
- 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
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 when you want to inspect a captured page's dark surfaces, components, and color use together.
What colors should I extract first from a dark mode website?
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.
How do I turn a dark mode palette into tokens without losing the original hierarchy?
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.