Dark mode design has become a fundamental requirement rather than an optional feature. MacOS, iOS, Android, and Windows all have system-wide dark mode, and users increasingly expect applications to honor their preference. Designing an effective dark mode palette requires different thinking than light mode — the rules aren't simply inverted.
Foundation: Why Pure Black and White Both Fail
The problem with pure black backgrounds
Pure black creates an unnatural visual environment. No physical surface is truly black — even matte black materials reflect some light. On OLED screens, pure black has a specific use case (battery saving, because black pixels are literally off), but as a design choice for readable interfaces, it creates uncomfortably high contrast between the background and any content surface.
The problem with pure white text
Pure white text on dark backgrounds creates a "halation" or "irradiation" effect — a visual bloom around letterforms that blurs their edges and actually reduces readability. This is why all major design systems (Material Design, iOS Human Interface Guidelines, GitHub's Primer) use off-white text rather than pure white.
Recommended Dark Mode Color Values
| Role | Recommended HEX | Notes |
|---|---|---|
| Base background | #0f1117 or #121212 | Near-black, not pure black |
| Panel / card surface | #1e1e2e or #1a1a1a | Slight elevation above base |
| Elevated surface (modal) | #252535 or #252525 | Second elevation level |
| Input field | #2a2a3a or #2a2a2a | Slightly distinct from card |
| Hover state overlay | rgba(255,255,255,0.06) | White at 6% opacity |
| Border / divider | #2e2e3e or #333 | Subtle, not high contrast |
| Primary text | #f0f0f0 or #e8e8e8 | Near-white, not pure white |
| Secondary text | #a0a0b0 or #9ca3af | 60-70% brightness |
| Muted / placeholder text | #6b7280 | Must pass 3:1 on backgrounds |
Sample Dark Mode Colors from Any Interface
ColorPickPro picks colors from dark interfaces just as easily as light ones.
Add ColorPickPro FreeSurface Elevation System
In light mode, shadows create visual depth — cards appear to float above the background. In dark mode, shadows don't work well because a dark shadow on a dark background is invisible. The solution: use progressively lighter shades of dark for each elevation level.
/* Dark mode elevation scale */
:root {
--surface-base: #0f1117; /* Page background */
--surface-1: #1a1a2e; /* Cards, panels */
--surface-2: #22223a; /* Dropdowns, tooltips */
--surface-3: #2a2a42; /* Modals, dialogs */
--surface-4: #30304a; /* Toasts, overlays */
}
Each elevation level is approximately 5-10 L* (lightness) steps lighter in the Lab color space, creating a visual hierarchy that mirrors the physical world where objects closer to a light source appear brighter.
Adapting Brand Colors for Dark Mode
The brand color problem in dark mode
A brand color like Tailwind's blue-600 (#2563eb) looks correct on a white button in light mode. On a dark background, this same dark blue is hard to distinguish from the dark background itself. For interactive elements in dark mode, you typically need a lighter variant of the brand color.
Recommended approach: brand color tints
If your brand primary is #2563eb (blue-600):
- Light mode button: background
#2563eb, textwhite - Dark mode button: background
#3b82f6(blue-500) or#60a5fa(blue-400), text#0f1117(dark) - Dark mode link:
#93c5fd(blue-300) — light enough to be visible, saturated enough to read as blue
The principle: in dark mode, move 2-3 shades lighter along your brand color scale for interactive elements.
Semantic colors in dark mode
| Semantic Role | Light Mode | Dark Mode |
|---|---|---|
| Success | #16a34a (green-600) | #4ade80 (green-400) |
| Error | #dc2626 (red-600) | #f87171 (red-400) |
| Warning | #d97706 (amber-600) | #fbbf24 (amber-400) |
| Info | #2563eb (blue-600) | #60a5fa (blue-400) |
Accessibility in Dark Mode
WCAG contrast requirements are the same in dark mode as light mode — 4.5:1 for normal text, 3:1 for large text. Common dark mode failures to check:
- Secondary/muted text: #9ca3af on #1a1a2e = check this pair — it may not meet AA for small text
- Placeholder text in inputs: Often too light; verify against the input background
- Disabled state text: Should be visually distinct but doesn't need to meet WCAG (exempted), though extremely low contrast makes interfaces feel broken
- Active/interactive elements: Your brand-colored buttons need sufficient contrast between text and button background — check both the button-to-page and text-to-button pairs
Verify Your Dark Mode Color Choices
Sample any color from dark interfaces with ColorPickPro, then verify contrast at WebAIM.
Try ColorPickPro FreeFrequently Asked Questions
What background color should dark mode use?
Near-black, not pure black. The #121212 to #1e1e2e range. Pure black creates excessive contrast and looks unnatural on most displays. It's only appropriate for OLED battery optimization where true black pixels are literally off — and even then, content surfaces sit slightly above pure black.
What text color should dark mode use?
Near-white, not pure white. #f0f0f0 or #e8e8e8 for primary text, #9ca3af or #a0a0b0 for secondary. Pure white creates halation — a blur effect around letterforms that reduces readability. Off-white maintains high contrast without visual harshness.
How do I adapt brand colors for dark mode?
Move 2-3 shades lighter along your brand color scale for interactive elements (buttons, links). A dark blue (#2563eb) becomes a lighter blue (#60a5fa) for dark mode links and buttons. Semantic colors (success, error, warning) also shift to lighter tints — green-400 instead of green-600.
What is surface elevation in dark mode design?
A system of progressively lighter dark shades to show interface layers — because dark shadows aren't visible against dark backgrounds. Base #121212, cards #1e1e2e, modals #252535. Each elevation is 5-10 lightness steps above the previous, mimicking how elevated surfaces catch more light.
How do I check if my dark mode colors pass WCAG contrast requirements?
Use ColorPickPro to sample the text and background colors from your dark mode implementation, then enter both HEX values at webaim.org/resources/contrastchecker. Check every text/background pair — primary text, secondary text, link color, button text, and placeholder text all need verification.
More Free Chrome Tools by Peak Productivity
