Dark Mode Color Palette Design Guide

← Back to Blog

Dark Mode Color Palette Design Guide

· 6 min read

Dark Mode Is Not Simply Inverting Colors

The most common dark mode mistake is simply inverting light theme colors (turning white to black and black to white). This approach causes unbalanced contrast, saturated colors becoming too garish, shadows losing effectiveness, and other problems. A good dark mode requires redesigning the color system, not just flipping values.

Dark Mode Background Hierarchy

Dark mode needs at least 3–4 levels of background colors, using subtle lightness differences to distinguish different UI hierarchy levels (the same principle as light mode, just in reverse). Use slightly brand-tinted dark grays rather than pure black:

/* Dark mode background hierarchy */
--dark-bg-base:     hsl(220, 15%, 7%);  /* Deepest: page bg */
--dark-bg-elevated: hsl(220, 15%, 11%); /* Cards, sidebars */
--dark-bg-overlay:  hsl(220, 15%, 15%); /* Dropdowns, modals */
--dark-bg-raised:   hsl(220, 15%, 19%); /* Hover states, inputs */

/* NOT: */
--dark-bg: #000000;  /* Pure black - avoid */

Why Avoid Pure Black Backgrounds

Pure black backgrounds (#000000) have several problems: excessively high contrast with bright content causes "halation effect" (bright text afterimages in the eye) during extended reading; while power-efficient on OLED screens, it appears harsh visually; shadows and depth cannot be expressed through darker colors. Google Material Design recommends #121212 as the dark theme base background.

Adjusting Brand Colors in Dark Mode

Brand primary colors from light mode typically need increased lightness in dark mode, because: the same color appears darker on dark backgrounds than on light backgrounds, and darker backgrounds require higher contrast for readability. HSL makes this adjustment easy:

:root {
  /* Light mode */
  --primary: hsl(214, 72%, 52%);  /* Standard blue */
  --primary-text: hsl(214, 72%, 40%);  /* Darker for text on white */
}

[data-theme="dark"] {
  /* Dark mode: increase lightness */
  --primary: hsl(214, 80%, 65%);  /* Brighter blue */
  --primary-text: hsl(214, 80%, 70%);  /* Even brighter for text on dark */
}

Text Colors for Dark Mode

Similarly, text in dark mode should not be pure white (#FFFFFF), but slightly brand-tinted light gray. Use different lightness levels for text of different importance:

[data-theme="dark"] {
  /* Primary text: high importance */
  --text-primary:   hsl(220, 20%, 92%);  /* Near white, slightly tinted */

  /* Secondary text: medium importance */
  --text-secondary: hsl(220, 15%, 70%);  /* Light gray */

  /* Tertiary/muted text: low importance */
  --text-muted:     hsl(220, 12%, 50%);  /* Medium gray */

  /* Disabled text */
  --text-disabled:  hsl(220, 10%, 35%);  /* Dark gray */
}

Shadows and Highlights in Dark Mode

In light mode, box-shadows are a common way to express depth and hierarchy. But in dark mode, shadows are nearly invisible (dark shadows on dark backgrounds). Two alternatives: use "highlight borders" instead of shadows (top border slightly brighter than other borders, simulating light from above), or express hierarchy through background color differences (like the background hierarchy system described above).

[data-theme="dark"] {
  /* Replace shadows with subtle elevation */
  .card {
    background: var(--dark-bg-elevated);
    box-shadow: none;
    border: 1px solid hsl(220, 15%, 22%);
    /* Optional: subtle top highlight */
    border-top-color: hsl(220, 15%, 26%);
  }
}

Semantic Color Adjustments for Dark Mode

Semantic colors like success, warning, and error also need adjustments for dark mode to ensure they're clearly visible on dark backgrounds without being too jarring:

/* Light mode semantic colors */
--success: hsl(142, 65%, 40%);   /* Slightly dark green */
--error:   hsl(0,   70%, 48%);   /* Slightly dark red */
--warning: hsl(38,  90%, 45%);   /* Slightly dark orange */

/* Dark mode: brighter versions */
[data-theme="dark"] {
  --success: hsl(142, 60%, 55%);  /* Brighter green */
  --error:   hsl(0,   75%, 62%);  /* Brighter red */
  --warning: hsl(38,  85%, 60%);  /* Brighter orange */
}

Key Checkpoints for Testing Dark Mode

• View on actual OLED screens (contrast between deep black and bright highlights varies greatly across screens)
• Check contrast ratios for all text/background combinations (dark mode still needs to meet WCAG standards)
• Verify image edge blending on dark backgrounds (images with white backgrounds show obvious white borders in dark mode)
• Test form controls in dark mode (input boxes, select boxes, and other system defaults may conflict with your dark theme)

Try the online tool now — no installation, completely free.

Open Tool →