Dark Mode Color Palette
Modern · Focused · Tech
A carefully calibrated dark-mode palette built for OLED-friendly dark backgrounds, comfortable contrast ratios, and vibrant accent colours. True black backgrounds cause blooming on OLED; dark zinc/slate tones are preferred.
| Swatch | Name | Hex |
|---|---|---|
| Background | #09090B | |
| Card | #18181B | |
| Border | #27272A | |
| Muted Text | #71717A | |
| Primary Text | #E4E4E7 | |
| Accent | #6366F1 |
Best For
Use zinc-950 for the base background, zinc-900 for cards, zinc-800 for borders. Primary text in zinc-100. Vibrant blue or purple for interactive elements and CTAs. Avoid pure #000000 — use #09090b (zinc-950) instead.
CSS Custom Properties
:root {
--dark-100: #09090B;
--dark-200: #18181B;
--dark-300: #27272A;
--dark-400: #71717A;
--dark-500: #E4E4E7;
--dark-600: #6366F1;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"dark": {
"100": "#09090B",
"200": "#18181B",
"300": "#27272A",
"400": "#71717A",
"500": "#E4E4E7",
"600": "#6366F1",
},
},
},
},
}Generate a custom palette
Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.
Open Color Palette GeneratorFrequently Asked Questions
What hex codes are in the Dark Mode Color Palette?
The Dark Mode Color Palette includes: Background (#09090B), Card (#18181B), Border (#27272A), Muted Text (#71717A), Primary Text (#E4E4E7), Accent (#6366F1).
What is the mood of the Dark Mode Color Palette?
Dark Mode Color Palette evokes: Modern · Focused · Tech. A carefully calibrated dark-mode palette built for OLED-friendly dark backgrounds, comfortable contrast ratios, and vibrant accent colours. True black backgrounds cause blooming on OLED; dark zinc/slate tones are preferred.
What industries use the Dark Mode Color Palette?
The Dark Mode Color Palette is popular in: Technology, Gaming, Developer Tools, Media. Use zinc-950 for the base background, zinc-900 for cards, zinc-800 for borders. Primary text in zinc-100. Vibrant blue or purple for interactive elements and CTAs. Avoid pure #000000 — use #09090b (zinc-950) instead.
What colours pair well with this palette?
This palette pairs well with: electric-blue, neon-green. Use zinc-950 for the base background, zinc-900 for cards, zinc-800 for borders. Primary text in zinc-100. Vibrant blue or purple for interactive elements and CTAs. Avoid pure #000000 — use #09090b (zinc-950) instead.