Why isn't dark mode just inverted light mode?

Inverted themes look harsh because surfaces need different elevation logic in the dark: raised layers get lighter, not darker, and saturated accents need desaturating. This tool derives proper dark semantics from your brand color instead.

What tokens are included?

Backgrounds, surfaces, borders, inputs, primary/secondary/accent actions and status colors — exported as CSS variables or JSON, ready for Tailwind v4 or plain CSS.

Dark mode generator

Turn any brand color into an accessible dark theme with semantic tokens — never a mechanical inversion of your light mode.

Turn any brand color into an accessible dark theme with real semantic tokens — backgrounds, surfaces, borders, actions and status colors — rather than a mechanical inversion of your light mode.

Foreground/background pairs are measured against WCAG contrast thresholds and adjusted automatically, and you can export the result as CSS variables or JSON for Tailwind v4 or plain CSS.

Values below are constructed for dark surfaces — lighter primaries and tinted neutrals with verified contrast — not an inversion of a light theme.

#0e090c--background

#150f13--background-subtle

#191317--surface

#201a1e--surface-raised

#130e11--surface-muted

#f3e9f0--foreground

#aaa2a7--foreground-muted

#797377--foreground-subtle

#b0639b--primary

#c072ab--primary-hover

#a65a92--primary-active

#130c11--primary-foreground

#103c26--secondary

#214c35--secondary-hover

#e1efe6--secondary-foreground

#b0659b--accent

#130c11--accent-foreground

#322c30--border

#282326--border-muted

#4a4348--border-strong

#191317--input

#322c30--input-border

#b0639b--focus-ring

#6bc670--success

#130c11--success-foreground

#f0bb3b--warning

#130c11--warning-foreground

#ff847d--danger

#130c11--danger-foreground

#59b6ff--info

#130c11--info-foreground

dark-theme.css

.dark {
  --background: #0e090c;
  --background-subtle: #150f13;
  --surface: #191317;
  --surface-raised: #201a1e;
  --surface-muted: #130e11;
  --foreground: #f3e9f0;
  --foreground-muted: #aaa2a7;
  --foreground-subtle: #797377;
  --primary: #b0639b;
  --primary-hover: #c072ab;
  --primary-active: #a65a92;
  --primary-foreground: #130c11;
  --secondary: #103c26;
  --secondary-hover: #214c35;
  --secondary-foreground: #e1efe6;
  --accent: #b0659b;
  --accent-foreground: #130c11;
  --border: #322c30;
  --border-muted: #282326;
  --border-strong: #4a4348;
  --input: #191317;
  --input-border: #322c30;
  --focus-ring: #b0639b;
  --success: #6bc670;
  --success-foreground: #130c11;
  --warning: #f0bb3b;
  --warning-foreground: #130c11;
  --danger: #ff847d;
  --danger-foreground: #130c11;
  --info: #59b6ff;
  --info-foreground: #130c11;
}

Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.

How to use this tool

Enter your brand color.
The tool constructs a semantic dark theme — lighter primaries, tinted neutrals and status colors with verified contrast.
Copy the .dark CSS block, or open the generator to preview the theme on real interfaces.

Frequently asked questions

Why isn't dark mode just inverted light mode?: Inverted themes look harsh because surfaces need different elevation logic in the dark: raised layers get lighter, not darker, and saturated accents need desaturating. This tool derives proper dark semantics from your brand color instead.
Are the generated dark themes accessible?: Yes — foreground/background pairs are checked against WCAG contrast thresholds and adjusted automatically, and the report shows the measured ratios honestly.
What tokens are included?: Backgrounds, surfaces, borders, inputs, primary/secondary/accent actions and status colors — exported as CSS variables or JSON, ready for Tailwind v4 or plain CSS.

Dark mode generator runs entirely in your browser — nothing you enter is sent to a server.

How to use this tool

Frequently asked questions

Related tools

Related guides