The hardest part of a dark UI isn't the accent color. It's the background. Get the base wrong and everything built on top feels off. Too dark and text floats in a void. Too light and it's not really dark mode. Too cool and it feels sterile. Too warm and it looks muddy.
These ten backgrounds are proven. They're in production at companies that have actual design teams making actual decisions. Use them as starting points, not as the only option.
The List
1. True Dark: #0A0A0A
Used by: Vercel, many portfolio sites. Nearly black but not quite. Pure #000000 on screens creates an OLED look that feels like a hole in the page. #0A0A0A gives you the same depth with slightly less eye strain. Pair with white text (#FAFAFA) and a minimal accent.
--background: #0A0A0A;
--surface: #111111;
--surface-raised: #1A1A1A;
/* Accent: whatever you want. This base is neutral. */2. Soft Black: #0F0F11
Used by: Linear. Slightly warmer than #0A0A0A with a barely perceptible blue undertone. This is the background that makes every element placed on it look precise. Linear's entire density-first aesthetic starts here.
--background: #0F0F11;
--surface: #17171A;
--surface-raised: #1E1E22;
/* Accent: surgical purple (#7C5CFC) or cool blue */3. Warm Charcoal: #171717
Used by: Supabase, shadcn/ui default dark. The most popular dark background in the Next.js ecosystem. Neutral warm. Comfortable for long sessions. Not dramatic, just solid.
--background: #171717;
--surface: #1E1E1E;
--surface-raised: #262626;
/* Accent: green (#3ECF8E) or white for minimal */4. Carbon: #0E0E0E
Used by: Ghost CMS, many dark marketing sites. Deeper than #171717, less extreme than #0A0A0A. The sweet spot for brands that want dark mode to feel premium without going full void. Ghost pairs this with a single lime accent (#A8E635) for maximum impact.
--background: #0E0E0E;
--surface: #161616;
--surface-raised: #1C1C1C;
/* Accent: high-contrast singles — lime, cyan, or orange */5. Navy Black: #0B0D14
A true dark with intentional blue. This isn't gray or neutral. It's dark navy. Products like GitHub Copilot and some developer tools use this range. The blue undertone pairs naturally with blue and purple accents without the coldness of a pure cool gray.
--background: #0B0D14;
--surface: #131620;
--surface-raised: #1A1D2A;
/* Accent: electric blue (#3B82F6) or violet (#8B5CF6) */6. Obsidian: #09090B
Used by: Tailwind UI, shadcn/ui zinc dark. The darkest usable background before things start to feel like a void. A tiny warm shift from pure black. This is the default for most Tailwind-based dark modes.
--background: #09090B;
--surface: #18181B;
--surface-raised: #27272A;
/* Accent: any — zinc base plays well with everything */7. Graphite: #1C1C1E
Used by: Apple (iOS dark mode). Slightly elevated off pure black, with a warm neutral tone. Apple chose this because it works on both OLED and LCD screens without looking washed out on either. If you're building a mobile-first product, this is the safe bet.
--background: #1C1C1E;
--surface: #2C2C2E;
--surface-raised: #3A3A3C;
/* Accent: iOS blue (#0A84FF) or any high-saturation color */8. Midnight Purple: #0D0B15
A dark background with a purple undertone. This is the AI/developer aesthetic. Products like Raycast and many AI wrappers use backgrounds in this range. The purple shifts the mood from corporate to creative without adding visible color.
--background: #0D0B15;
--surface: #15131F;
--surface-raised: #1D1A2A;
/* Accent: violet (#A78BFA) or hot pink (#EC4899) */9. Forest Dark: #0C1210
A dark background with a green undertone. Rare in production but extremely effective for brands that want to feel organic or developer-adjacent without using standard gray. Terminal aesthetics live here.
--background: #0C1210;
--surface: #141C19;
--surface-raised: #1C2622;
/* Accent: green (#22C55E) or emerald (#10B981) */10. Matte Dark: #1A1A1A
The lightest entry on this list. Used by: Spotify, many media products. This background doesn't feel like “dark mode.” It feels like a dark room. Warm, soft, and comfortable for long content consumption sessions. Music players, media apps, and reading modes thrive here.
--background: #1A1A1A;
--surface: #222222;
--surface-raised: #2A2A2A;
/* Accent: vibrant — green (#1DB954), orange, or pink */How to Choose
Three questions will narrow it down fast.
First: how dark do you want to go? Developer tools and premium SaaS tend toward the deeper end (#09090B to #0F0F11). Consumer products and media apps sit higher (#171717 to #1A1A1A). The deeper you go, the more dramatic your accent color becomes.
Second: warm or cool? Warm backgrounds (#171717, #1A1A1A, #1C1C1E) feel comfortable for long sessions. Cool backgrounds (#0B0D14, #0D0B15) feel more technical and precise. Neither is better. It depends on what your product is.
Third: what's your accent color? High-saturation accents (neon green, hot pink, electric blue) need darker backgrounds to pop. Muted accents (slate blue, sage green) work better against lighter darks where the contrast isn't extreme.
See Them in Context
A hex code on a white page doesn't tell you how a dark background actually feels. You need to see it with real typography, real components, and a real accent color on top of it.
SeedFlip's 100+ design seeds include dozens of dark palettes. Each one shows the full surface system (background, surface, raised, border) with matched typography and accent colors. Flip through them and you'll find your background in seconds instead of hours.
Stop agonizing over background hex codes. Pick one, pair an accent, and ship. You can always adjust later.