Best Dark Mode Color Palettes for Web Apps

Dark mode has become a baseline expectation in professional web applications. But most dark mode implementations feel like an afterthought, light backgrounds with a CSS filter slapped on, or a "dark" grey (#777777) that satisfies no one. Great dark mode design is its own discipline, with different rules than light mode.

The Surface Elevation System

The defining characteristic of great dark mode is a layered surface system. In Material Design's dark theme specification (and independently in virtually every well-designed dark UI), darker surfaces are at lower elevations and lighter surfaces are at higher elevations. This is the opposite of light mode, where lighter surfaces appear lower and shadows suggest elevation.

In practice, this means: your page background is the darkest value. Cards and panels are slightly lighter. Elevated elements like modals and dropdowns are lighter still. Tooltips and popovers are at the top, lightest dark value.

• Page background: #0F172A (slate-900)
• Card / panel: #1E293B (slate-800)
• Elevated elements: #334155 (slate-700)
• Tooltip / popover: #475569 (slate-600)

Text Hierarchy in Dark Mode

Pure white (#FFFFFF) text on a dark background causes visual vibration, the extreme contrast between light text and dark background creates a visual "glow" effect that contributes to eye fatigue over extended reading. Most mature dark UI systems use near-white rather than pure white for primary text.

A three-level dark mode text hierarchy using Tailwind slate values:

• Primary text: slate-100 (#F1F5F9), headlines, primary content
• Secondary text: slate-400 (#94A3B8), labels, metadata, secondary info
• Muted text: slate-600 (#475569), timestamps, helper text, disabled

Adjusting Accent Colors for Dark Mode

The most common dark mode mistake is using the same accent color values as light mode. A blue-600 (#2563EB) is perfect for a primary button on a white background, it achieves 4.5:1+ contrast and reads clearly as an interactive element. On a dark slate background, that same color looks muddy and achieves insufficient contrast.

For dark mode, use lighter values of your accent colors: blue-400 (#60A5FA) instead of blue-600, emerald-400 (#34D399) instead of emerald-600, and so on. These lighter values maintain sufficient contrast against dark backgrounds while retaining the hue identity of your brand and semantic colors.

Border and Divider Colors in Dark Mode

Borders and dividers in dark mode should use a very subtle, low-opacity white rather than a specific grey value. This approach automatically adapts if your surface colors change, while a fixed grey can look either invisible or too prominent depending on the surrounding surface color.

/* Prefer opacity-based borders in dark mode */
--border: rgba(255, 255, 255, 0.08);

/* Or use specific slate values */
--border: #1E293B;
--border-strong: #334155;