Skip to main content
Back to Colors generators

Colors

Dark Mode Color Palette Generator

Used by developers, writers, and creators worldwide.

A dark mode color palette generator removes the trial-and-error from building accessible, visually layered dark themes. Designers and developers use it to get a complete set of named color roles — backgrounds, surfaces, borders, text levels, and accents — that work together without manual contrast checks. The accent color selector lets you anchor the palette to cool blue, purple, green, orange, or pink, keeping results aligned with an existing brand. Dark themes fail most often because surface hierarchy collapses: cards blend into backgrounds, modals disappear into panels. This tool generates distinct elevation levels so each layer reads clearly. Every value is labeled by role, not just hex, so you can paste them straight into CSS custom properties or Figma tokens without renaming a thing.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Select an accent color style from the dropdown to match your brand hue or choose random to explore options.
  2. Click the generate button to produce a full palette with labeled roles for backgrounds, surfaces, text, and accents.
  3. Review each named color role and its hex value to confirm the hierarchy reads clearly across elevation levels.
  4. Copy the hex values directly into your CSS custom properties, Figma color styles, or design token JSON file.
  5. Regenerate with the same accent style multiple times to get alternative shade variations within the same hue family.

Use Cases

  • •Defining CSS custom properties for a site-wide dark theme in a Next.js or Remix app
  • •Setting up a dark-mode color styles group in Figma before building a component library
  • •Generating a purple-accented palette for a VS Code or JetBrains extension UI
  • •Prototyping a SaaS admin dashboard that needs four distinct surface elevation levels
  • •Seeding dark-mode design tokens into a Storybook theme before writing any components

Tips

  • →Generate 3-5 palettes using the same accent style, then pick the one where the surface-to-background step looks most distinct.
  • →Pair the generated border color with 40-60% opacity on top of surfaces rather than as a flat value — it scales better across elevation levels.
  • →For text hierarchy, apply the secondary text color to labels and metadata, not just placeholder text; it reduces visual noise in dense UIs.
  • →Test your chosen palette in a browser's forced dark mode simulator (Chrome DevTools > Rendering) to catch colors that invert unexpectedly.
  • →If the accent feels too vivid on the generated background, drop its opacity to 85-90% for interactive states instead of choosing a different hue.
  • →Map the 'surface elevated' color to tooltips and dropdowns specifically — using the base surface color for these makes layering ambiguous.

FAQ

what background color should i use for dark mode

Avoid pure black (#000000) — it makes surface layers nearly impossible to distinguish. Most production apps target a dark gray between #0d0d0d and #1c1c1c for the base background, which keeps elevation steps visible without looking washed out. This generator targets that range by default and outputs each layer as a labeled role.

how do i use a generated dark mode palette in css

Define each color role as a CSS custom property inside :root, then override the values inside a prefers-color-scheme: dark media query or a .dark class on the html element. Using named roles like --color-surface or --color-text-secondary means your component styles stay the same — only the variable values swap.

can i use the same accent color in both light and dark mode

The same hue works, but the lightness value needs to shift — saturated mid-tones that look sharp on white often appear neon on dark backgrounds. Increase HSL lightness by roughly 10–20% for the dark-mode version. A design token system that maps each role to a different hex value per theme is the standard approach for keeping brand color consistent across both modes.