Theme System Workflow
Generate both light and dark themes from a single brand color, map semantic roles automatically, validate WCAG and APCA contrast, and export code-ready theme tokens.
Output
Light + Dark Semantic Theme
Built for CSS Variables, Tailwind v4, and shadcn-style theme systems, not just a pile of swatches.
Inputs
Brand Scale
A 50-950 brand scale derived from the base color for primary, accent, and ring roles.
50
100
200
300
400
500
600
700
800
900
950
Neutral Scale
A low-chroma neutral scale on the same hue for background, surface, muted, border, and input roles.
50
100
200
300
400
500
600
700
800
900
950
What this solves
Most teams do not lack colors. They struggle to map one brand palette into stable semantic themes for both light and dark mode.
This tool validates key semantic pairs with both WCAG and APCA before export, instead of forcing rework later.
The output is not an anonymous scale. It is a usable theme token set for background, surface, primary, muted, border, input, and ring.
The export matches `:root`, `.dark`, and `@theme inline` theme structures instead of stopping at the design-exploration layer.
Dual Preview
This section shows real theme behavior across the page background, card surface, buttons, muted blocks, inputs, and focus rings, not just a color palette.
Light Theme
Dashboard Card
This preview intentionally covers the page background, card surface, buttons, input field, and focus ring so you see a theme system, not isolated colors.
Muted Block
This block simulates low-emphasis content so you can judge whether muted surfaces and muted text are still readable.
Focus ring uses `#0071F4` and input line uses `#B4B2BA`.
Dark Theme
Dashboard Card
This preview intentionally covers the page background, card surface, buttons, input field, and focus ring so you see a theme system, not isolated colors.
Muted Block
This block simulates low-emphasis content so you can judge whether muted surfaces and muted text are still readable.
Focus ring uses `#00B7FF` and input line uses `#4B5763`.
Contrast Diagnostics
The diagnostic cards summarize the core light-theme pairs first so you can quickly judge whether the system is strong enough for a component library or design system.
Foreground / Background
WCAG 15.94 · APCA 94.6 Lc
Body text must remain reliably readable on the page background. This pair defines the baseline reading experience for the whole theme.
Surface / Surface Foreground
WCAG 14.15 · APCA 87.3 Lc
Text inside cards, panels, and popovers cannot be merely visible. This pair determines the long-term usability of component surfaces.
Primary / Primary Foreground
WCAG 5.70 · APCA 74.6 Lc
Primary buttons and key CTAs need dependable text contrast. This pair decides whether critical actions are truly safe to ship.
Secondary / Secondary Foreground
WCAG 11.04 · APCA 73.7 Lc
Secondary buttons are often quieter, but their text still needs clear readability and usable interaction states.
Accent / Accent Foreground
WCAG 12.11 · APCA 82.9 Lc
Accent areas work for tags, highlight blocks, and light interactions. They need both visual emphasis and readable content.
Muted / Muted Foreground
WCAG 6.67 · APCA 70.1 Lc
Supporting copy can be softer, but not so weak that it loses its information hierarchy.
Border / Background
WCAG 1.93 · APCA 32.7 Lc
Borders and input lines do not need body-text contrast, but they must stay visible enough to create structure and separation.
Theme Export
/* theme: brand */
:root {
--background: #FFEDED;
--foreground: #19232B;
--card: #F1E1E2;
--card-foreground: #19232B;
--popover: #F1E1E2;
--popover-foreground: #19232B;
--primary: #005ED5;
--primary-foreground: #FFEDED;
--secondary: #D4CACF;
--secondary-foreground: #19232B;
--muted: #F1E1E2;
--muted-foreground: #4B5763;
--accent: #BFE7FF;
--accent-foreground: #001F74;
--border: #B4B2BA;
--input: #B4B2BA;
--ring: #0071F4;
--destructive: #DC2626;
--destructive-foreground: #FFFFFF;
}
.dark {
--background: #19232B;
--foreground: #FFEDED;
--card: #252F38;
--card-foreground: #FFEDED;
--popover: #252F38;
--popover-foreground: #FFEDED;
--primary: #0071F4;
--primary-foreground: #FFFFFF;
--secondary: #39434D;
--secondary-foreground: #FFEDED;
--muted: #252F38;
--muted-foreground: #B4B2BA;
--accent: #001F74;
--accent-foreground: #FFEDED;
--border: #4B5763;
--input: #4B5763;
--ring: #00B7FF;
--destructive: #EF4444;
--destructive-foreground: #FFFFFF;
}Search Intent Fit
People rarely need a random palette. They need an answer to a real implementation problem: how to turn one brand color into an accessible light and dark theme, how to generate shadcn theme values, or how to export semantic tokens that developers can ship.
If you need a dark mode color palette generator for a real product UI, this page gives you semantic background, surface, action, and border roles instead of disconnected swatches.
If you are looking for a shadcn theme generator, the export is already structured around `:root`, `.dark`, and the variable names modern shadcn-style themes expect.
If what you need is a theme token generator, this workflow outputs semantic theme roles you can move into CSS variables, Tailwind v4, and JSON token pipelines.
If your real question is how to make one brand color work in dark mode without killing readability, this tool is designed for that exact job.
How To Use
The workflow is intentionally short. You enter a base color, review the generated roles, verify accessibility, and copy the export format that matches your stack.
Step 1
Paste a brand color like `#6366F1`, `#0F766E`, or `#F97316`. The generator builds both a brand scale and a neutral support scale from that single starting point.
Step 2
Check how the system behaves on page backgrounds, cards, buttons, muted areas, inputs, and focus rings. This tells you whether the theme feels controlled in real UI, not just in a swatch row.
Step 3
Use the built-in diagnostics to confirm readable body text, button text, accent blocks, muted areas, and border visibility with both WCAG and APCA.
Step 4
Choose Theme CSS for raw variables, shadcn / Tailwind v4 for app theming, or JSON Tokens for design token workflows and downstream tooling.
This is especially useful for front-end developers building dark mode UI, design engineers maintaining token systems, indie makers shipping app themes quickly, and teams standardizing CSS variables or Tailwind theme tokens across products.
Next Steps
If you want to review specific text contrast, regenerate the base OKLCH scale, or split token work into separate steps, these links continue the workflow without offloading the core job elsewhere.
APCA Contrast Checker
Validate specific text, button, and dark-surface pairs in more detail.
OKLCH Scale Generator
Build a fuller 50-950 brand ramp first, then return to semantic theme mapping.
Design Token Exporter
If you only want to work on export formats, jump back to the dedicated token exporter.
Read the Guide
Read the full guide to understand why a brand color should not be dropped into dark mode without a real semantic system.