Skip to content
ChromaBrew

Dark mode generator

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

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;
}

How to use this tool

  1. Enter your brand color.
  2. The tool constructs a semantic dark theme — lighter primaries, tinted neutrals and status colors with verified contrast.
  3. 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.

Related tools