Dark Mode Converter
Convert your light mode colors to dark mode with smart role-aware conversion
Automatically convert a light mode palette to dark mode with smart role-aware conversion (background, surface, primary, secondary, text). Fine-tune results manually, analyze WCAG contrast, and export ready-to-use CSS.
Light Mode
Dark Mode
Contrast Analysis (Dark Mode)
Text on Background
13.92:1
Text on Surface
12.39:1
Text on Primary
2.34:1
Text on Secondary
2.03:1
Primary on Background
8.02:1
Comparative Preview
Sample Title
This is sample text to see how your colors will look in both modes. Contrast and readability are essential.
Sample Title
This is sample text to see how your colors will look in both modes. Contrast and readability are essential.
Elevation Scale
In dark mode, use lighter surfaces instead of shadows to indicate elevation.
Dark Mode Tips
- • Maintain adequate contrast (minimum 4.5:1 for text per WCAG AA)
- • Slightly reduce saturation in dark mode to avoid visual fatigue
- • Use dark grays (#121212) instead of pure black (#000000)
- • Indicate elevation with lighter surfaces, not shadows
- • Avoid pure black: it creates too much contrast with white text and causes eye strain
- • Test your design on different devices and lighting conditions
How it works
Dark mode isn't simply inverting colors. It requires careful adjustments to luminosity, saturation, and contrast to maintain readability, visual hierarchy, and WCAG accessibility.
Dark mode principles
- Background: Use dark grays (#121212), never pure black (#000)
- Surface: Elevate with lighter backgrounds, not shadows
- Colors: Reduce saturation of bright colors by 10-20%
- Text: Use white/light gray (#E0E0E0), not pure white
- Contrast: Maintain minimum 4.5:1 for text (WCAG AA)
🎨 Semantic Role System
This tool converts each color based on its UI role:
Background→ Main background (#121212, L≈7%)Surface→ Cards and elevated surfaces (#1E1E1E, L≈12%)Primary→ Brand color: lightened if dark, desaturated if too vividSecondary→ Accent color: similar treatment to primaryText→ Text: inverted to light, saturation neutralized
📐 Elevation System (Material Design)
In dark mode, elevation is indicated by lighter surfaces, not shadows:
- Level 0:
#121212— Base background - Level 1:
#1E1E1E— Cards, drawers - Level 2:
#232323— Modals, menus - Level 3:
#282828— Tooltips, snackbars - Level 4:
#2D2D2D— Focused elements
💡 Practical Use Cases
Case 1: Adapt corporate palette
Your brand uses blue #2563EB on white background.
→ Dark background: #121212
→ Adjusted blue: #60A5FA (lighter, less saturated for readability)
Case 2: Elevated cards
In light mode you use shadows (box-shadow) to elevate cards.
→ In dark mode: use lighter backgrounds instead of shadows
→ Base: #121212 → Card: #1E1E1E → Elevated card: #2D2D2D
Case 3: Error/success states
Error red #DC2626 is too intense in dark.
→ Reduce saturation: #F87171
→ Keep semantic meaning but reduce visual fatigue
Case 4: CSS Implementation
Use prefers-color-scheme and CSS variables for automatic switching:
:root { --bg: #FFFFFF; --text: #212121; }
@media (prefers-color-scheme: dark) {
:root { --bg: #121212; --text: #E0E0E0; }
}