Skip to main content
Back to Colors generators

Colors

Dark Mode UI Palette Generator

Used by developers, writers, and creators worldwide.

A dark mode UI palette generator does more than invert colors — it produces a structured color system where backgrounds, surfaces, borders, text, accents, and semantic states all work together. This tool outputs a complete set of design tokens in CSS custom property format, covering everything from base background to success and danger states. Set your own accent hue (0–360) to match a brand color, or leave it blank for a randomized result. The neutrals are automatically tinted toward your accent, so the palette feels cohesive rather than assembled from separate decisions. Backgrounds avoid pure black by default, which improves depth and reduces eye strain on OLED displays.

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. Enter a hue value between 0 and 360 in the Accent Hue field, or leave it blank to generate a random accent color.
  2. Click the generate button to produce a full dark mode palette with labeled color roles.
  3. Review the output list — each entry shows the token name, hex value, and its role in the UI.
  4. Copy individual hex values or the full palette and paste them into your CSS variables, design tokens file, or Figma styles.
  5. If the accent feels too saturated or too muted, adjust the hue slightly and regenerate until the palette matches your brand.

Use Cases

  • •Seeding a CSS custom properties file for a React or Vue component library's dark theme
  • •Defining Figma token styles before handing off a SaaS dashboard to engineers via Tokens Studio
  • •Building a VS Code extension or developer tool with a custom, brand-aligned dark color scheme
  • •Generating a token spec for both React Native StyleSheet and Android color resource XML in one pass
  • •Prototyping a dark-mode-first landing page with consistent surface elevation and accent variants

Tips

  • →Hues in the 200–240 range (blue-gray) produce the most versatile dark palettes for productivity and developer tools.
  • →Use the surface and card colors for component backgrounds, never for text — reserve high-contrast values for type only.
  • →If you're building a multi-theme system, generate palettes at hue offsets of 30–60 degrees apart to keep themes visually distinct.
  • →The border color should sit between the background and surface in lightness — if borders disappear or dominate, regenerate with a nearby hue.
  • →Test your accent color against both the background and surface levels before committing — it needs to pass WCAG AA contrast on both.
  • →For icon-heavy UIs, prefer accent hues around 180–220 (cyan to blue) — these maintain legibility at small sizes better than warm hues.

FAQ

what colors do you actually need in a dark mode UI palette

At minimum: a base background, two surface elevation levels, a border color, muted and primary text, an accent with hover and active states, and semantic colors for success, warning, danger, and info. Missing any of these roles leads to patching gaps inconsistently as the UI grows. This generator outputs all of them labeled and ready to use.

why shouldn't dark mode backgrounds be pure black

Pure black (#000000) creates harsh contrast and causes halation on OLED screens, making text appear to bleed. Slightly tinted dark grays — roughly #0f1117 to #1a1d27 — give surfaces room to express elevation through lightness steps rather than shadows alone. This generator handles that automatically, so you get depth without manually tuning each background level.

how do I use the output colors in CSS

Assign each hex value to a CSS custom property inside a [data-theme='dark'] selector, for example: --bg-base: #111318; --surface-card: #1c1f27; --accent: #5b8fff. Reference those variables throughout your stylesheet. Switching themes then becomes a single attribute change on the root element, which works cleanly alongside any light-mode token set you already have.