Dark Mode color palette
Four layered grays, #121212 through #383838, give a dark interface its surfaces, and soft purple #BB86FC is the single accent. The grays are neutral with no blue cast, so screens look like matte charcoal. Stack them with lighter grays for raised cards and the darkest for the page, and you get depth without drop shadows. Use it as the night theme for a productivity app, music player, admin panel or reading app.
Dark Mode palette in use
Use #121212 for the app background, #1E1E1E and #2D2D2D for cards and menus, and #383838 for dividers. #BB86FC goes on buttons, toggles and links, with off-white for body text.
This pair measures 7.07:1, so it works for body text too. The button uses #383838 with white text.
ButtonGood for
- Productivity app night theme
- Admin panel
- Music player interface
- E-reader dark setting
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#121212 | #BB86FC | 7.07:1 | AAA |
#1E1E1E | #BB86FC | 6.29:1 | AA |
#2D2D2D | #BB86FC | 5.19:1 | AA |
#383838 | #BB86FC | 4.42:1 | AA large |
Dark Mode palette as code
CSS variables
:root {
--dark-mode-1: #121212;
--dark-mode-2: #1E1E1E;
--dark-mode-3: #2D2D2D;
--dark-mode-4: #383838;
--dark-mode-5: #BB86FC;
}Tailwind v4
@theme {
--color-dark-mode-1: #121212;
--color-dark-mode-2: #1E1E1E;
--color-dark-mode-3: #2D2D2D;
--color-dark-mode-4: #383838;
--color-dark-mode-5: #BB86FC;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'dark-mode': {
100: '#121212',
200: '#1E1E1E',
300: '#2D2D2D',
400: '#383838',
500: '#BB86FC',
},SCSS
$dark-mode-1: #121212;
$dark-mode-2: #1E1E1E;
$dark-mode-3: #2D2D2D;
$dark-mode-4: #383838;
$dark-mode-5: #BB86FC;JSON
["#121212","#1E1E1E","#2D2D2D","#383838","#BB86FC"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.