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 built for real UI work, not just aesthetic experiments. Designers and developers use it to produce background, surface, and accent colors calibrated for dark interfaces — avoiding the harshness of pure black while preserving contrast and hierarchy. Each palette is tuned to one of three style presets: neutral grays for productivity tools, warm undertones for reading apps, or cool blue-grays for developer dashboards and data-heavy interfaces. Control how many swatches you get — three covers a minimal single-surface layout, while five gives you enough range for backgrounds, elevated surfaces, borders, and interactive states without guessing.

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. Set the Number of Colors slider to match the surface roles your UI needs — start with 5 for a typical app layout.
  2. Select a Style (neutral, warm, or cool) based on the emotional tone and product category you're designing for.
  3. Click Generate to produce a palette, then regenerate a few times to compare variations within the same style.
  4. Click any swatch to copy its hex value, then paste directly into Figma, CSS variables, or your design token file.
  5. Paste your chosen hex pairs into a contrast checker to confirm text-on-background ratios meet WCAG AA before finalizing.

Use Cases

  • •Building a VS Code or JetBrains editor theme that needs layered surface grays
  • •Seeding a Figma design system with dark-mode tokens for background, surface, and border roles
  • •Prototyping a low-light reading interface in a Storybook component library
  • •Choosing background and card surface colors for a Tailwind CSS dark-mode web app
  • •Establishing a dark UI palette for a real-time analytics dashboard or monitoring tool

Tips

  • →Generate 5 to 6 swatches and assign them to roles before judging — background, card, border, primary text, secondary text, and accent tell you far more than raw colors alone.
  • →Cool-style palettes pair well with blue or cyan accent colors; warm-style palettes clash badly with cool purple or teal accents — match your accent hue family to your style choice.
  • →If colors look flat in your mockup, add 8-12% opacity white as an overlay on elevated surfaces rather than picking a separate lighter shade — it scales automatically across components.
  • →Regenerate at least five times within a single style setting; small variations in midtone grays significantly affect whether a palette feels modern or dated.
  • →Avoid using more than two surfaces that are nearly identical in lightness — your eye needs clear steps between background, card, and modal levels to establish hierarchy.

FAQ

why shouldn't I just use pure black for dark mode backgrounds

Pure black creates extreme contrast against text and UI elements, causing halation — a blooming effect that makes reading harder, especially on OLED screens. Dark grays like #121212 or #1e1e1e are the industry standard, used by Material Design and most major design systems. This generator avoids pure black by default across all three style presets.

what contrast ratio do I need for text on a dark background

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. On a typical dark base like #1e1e1e, body text should be around #e0e0e0 or lighter to pass comfortably. Run your generated palette through a contrast checker like WebAIM's tool before committing to production.

what's the difference between neutral, warm, and cool dark palettes

Neutral palettes use pure gray tones with no color cast — the safest choice for most apps. Warm palettes carry a subtle brown or amber tint, which feels less clinical and suits reading apps or content platforms. Cool palettes lean blue-gray, matching the aesthetic common in code editors, fintech dashboards, and data visualization tools.