Dark Color Palette: Hex Codes and Ideas
A dark color palette uses deep, low-light neutrals as its base, lifted only by light text and a single restrained accent. Done well, it feels modern, immersive, and high-end; done badly, it strains the eyes — so the hex choices below are tuned for real dark-mode UI, not pure black. The named palettes and hex table are ready to use, followed by guidance on combining them.
For why dark, low-luminance schemes read as focused and premium, see our color psychology guide. A dark palette is essentially a deep, value-driven neutral color palette, and its primary application is covered in our dark mode design guide. It pairs naturally with the minimalist color palette when you want restraint.
What colors are in a dark palette?
A well-built dark palette is layered, not a single flat black. The base is near-black (#121212) — the recommended dark-mode background because pure #000000 causes harsh contrast and visible smearing on OLED. On top sit elevated surfaces in dark gray (#1E1E1E) and charcoal (#2D2D2D), which create depth through subtle steps in lightness. A deep navy (#0D1B2A) adds a cooler, richer option, while off-white (#E0E0E0) carries the text, and a muted accent like teal (#4DB6AC) provides the single point of color. Notice that text is off-white, not pure white — softening it reduces eye strain on dark backgrounds.
| Color name | Hex | RGB | Role |
|---|---|---|---|
| Near-Black | #121212 | 18, 18, 18 | Background |
| Dark Gray | #1E1E1E | 30, 30, 30 | Surface / cards |
| Charcoal | #2D2D2D | 45, 45, 45 | Elevated surface |
| Deep Navy | #0D1B2A | 13, 27, 42 | Alt background |
| Muted Teal | #4DB6AC | 77, 182, 172 | Accent |
| Off-White | #E0E0E0 | 224, 224, 224 | Text |
5 dark palettes with hex codes
Each scheme layers deep neutrals with light text and one accent. Copy the hex codes directly.
1. Classic Dark Mode
The standard dark-UI stack — near-black base, layered grays, teal accent.
Near-Black #121212 Dark Gray #1E1E1E Charcoal #2D2D2D Muted Teal #4DB6AC Off-White #E0E0E0
2. Midnight Navy
A cooler, richer dark scheme anchored on deep navy.
Deep Navy #0D1B2A Navy Surface #1B2A3A Slate Blue #2E4057 Sky Accent #5FA8D3 Off-White #E0E0E0
3. Dark Amber
Warm amber accent against charcoal — energetic and premium.
Near-Black #121212 Charcoal #2D2D2D Graphite #3E3E3E Amber #F0A500 Off-White #E0E0E0
4. Dark Emerald
A jewel-tone green glow on deep neutrals — sophisticated and rich.
Near-Black #121212 Dark Gray #1E1E1E Deep Emerald #14352A Emerald Accent #2ECC71 Off-White #E0E0E0
5. Pure Monochrome Dark
No accent — only deep neutrals and light text, maximally minimal.
Ink #0A0A0A Near-Black #121212 Charcoal #2D2D2D Mid Gray #757575 Off-White #E0E0E0
Which dark colors go together?
Dark pairings work by stacking deep neutrals in small lightness steps, then lifting them with light text and one accent. Near-Black (#121212) and Off-White (#E0E0E0) are the foundational pairing — the dark-mode equivalent of black-on-white, but softened at both ends to ease eye strain. Build depth by layering Dark Gray (#1E1E1E) and Charcoal (#2D2D2D) as elevated surfaces; each step lighter reads as “closer” to the viewer, which is how dark interfaces show hierarchy without borders.
The single accent — Muted Teal (#4DB6AC), amber, or emerald — should be saturated enough to glow against the dark base but used sparingly. A reliable formula: near-black background, two gray surface steps, off-white text, and the accent reserved for primary actions and key highlights. Avoid pure black (#000000) for large areas and avoid pure white (#FFFFFF) for body text — both create excessive contrast that vibrates and tires the eye in dark settings.
Temperature matters here too. A neutral dark scheme (gray-based) feels clean and modern, while a cool dark scheme built on Deep Navy (#0D1B2A) feels richer and more premium, and a warm dark scheme (charcoal warmed slightly toward brown) feels softer and more inviting. Choose one direction and keep your surfaces consistent with it; a navy base paired with a warm amber accent, for instance, gives a deliberate cool-ground, warm-highlight contrast that reads as confident rather than accidental.
How to use a dark palette in design
The defining principle is depth through layered darks. Set the base to Near-Black (#121212), then raise cards and panels using Dark Gray (#1E1E1E) and Charcoal (#2D2D2D) — the lighter the surface, the higher it sits. Body text goes in Off-White (#E0E0E0) rather than pure white, and the accent appears only where it carries meaning.
The crucial dark-mode detail is dialing back saturation and brightness on accents: colors that look right on a white background often glare on black, so mute them. Watch contrast carefully — text must stay legible, but avoid maximum contrast, which causes halation. Many products offer dark mode as a toggle, so design the dark palette as a deliberate counterpart to your light one rather than just inverting it. Our dark mode design guide covers the full implementation, including elevation and accessibility.
Dark palette for branding, web, and apps
In branding, a dark palette signals luxury, exclusivity, technology, and focus, which suits premium products, gaming, finance, and creative tools. A dark identity feels confident and immersive, though it demands careful contrast for accessibility in print and on light surfaces. See how to choose brand colors for picking the one accent that gives a dark brand its spark.
On the web and in apps, dark palettes reduce glare in low light, can extend battery life on OLED screens, and create an immersive, content-forward feel for media, code editors, and dashboards. Always ship a tested dark mode rather than an auto-inverted one: confirm surface elevation reads clearly, accents are muted to taste, and text contrast meets WCAG AA. Whether your accent leans warm (amber) or cool (teal, sky) sets the entire emotional tone — see our warm vs cool colors guide.
Frequently Asked Questions
What colors are in a dark palette?
A dark palette uses deep neutrals — near-black (#121212), dark gray (#1E1E1E), charcoal (#2D2D2D), and often deep navy (#0D1B2A) — with off-white text (#E0E0E0) and one muted accent such as teal (#4DB6AC). Layered darks create depth while the accent provides a single point of color.
Should a dark palette use pure black?
Generally no. Pure black (#000000) creates harsh contrast and can cause smearing on OLED screens, so most dark designs use near-black (#121212) as the base. Likewise, text is usually off-white (#E0E0E0) rather than pure white, which reduces eye strain on dark backgrounds.
What accent colors work on a dark palette?
Muted, slightly desaturated accents glow nicely without glaring: teal (#4DB6AC), amber (#F0A500), emerald (#2ECC71), and sky blue (#5FA8D3) all work. Colors that look right on white often appear too bright on black, so reduce their saturation and brightness for dark backgrounds.
How do you show hierarchy in a dark palette?
Use elevation through lightness: the base sits at near-black, and each surface that should appear closer to the viewer gets a slightly lighter gray (#1E1E1E, then #2D2D2D). This layered approach replaces the shadows and borders that light interfaces rely on.
