Dark Mode Color Palette

Convert your light mode color palette to a dark mode equivalent.

Light Mode

Background#ffffff

Surface#f8fafc

Primary#6366f1

Text#1e293b

Text Secondary#64748b

Border#e2e8f0

Accent#f59e0b

Dark Mode (Generated)

Background#141414

Surface#1c2126

Primary#5c5efa

Text#eaedf0

Text Secondary#97a3b4

Border#333e4d

Accent#ffa200

CSS Variables

:root {
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-primary: #6366f1;
  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-border: #e2e8f0;
  --color-accent: #f59e0b;
}

[data-theme="dark"] {
  --color-background: #141414;
  --color-surface: #1c2126;
  --color-primary: #5c5efa;
  --color-text: #eaedf0;
  --color-text-secondary: #97a3b4;
  --color-border: #333e4d;
  --color-accent: #ffa200;
}

About Dark Mode Color Palette

Automatically adapt your light mode design tokens to a dark theme. Adjust each color using the picker on the left and the dark mode equivalents update instantly on the right. The tool uses HSL-based adjustments — darkening backgrounds and surfaces to near-black, lightening text to near-white, and preserving hue and saturation on accent colors. Copy the generated CSS custom properties and drop them into your stylesheet to support any framework that uses CSS variables for theming.

Private & free — this tool runs entirely in your browser.