Dark Mode Color Palettes (With Hex Codes)

Last updated: August 2026

Four ready-to-use dark mode palettes: two neutral stacks, a brand-tinted stack, and a monochrome terminal theme. Every hex code is copyable, every role is labeled (background, surface, border, text, accent), and every text-on-background pairing below was computed with the WCAG contrast formula — the ratios are stated with each palette, not assumed. Build your own variant afterward with the shade generator and check it in the contrast checker.

1. Neutral Slate Stack

The workhorse. Tailwind's slate family has a barely-cool undertone that reads as "professional dashboard" — these six values cover the whole UI.

Use #020617 for the page, #0f172a for cards, #1e293b for hovered or raised elements, #334155 for borders. Body copy in #cbd5e1, headings in #f1f5f9. Pair with any accent — it's neutral enough to take one.

Contrast: body text #cbd5e1 on #020617 = 13.59:1 (passes AAA) · headings #f1f5f9 on surface #0f172a = 16.3:1 (passes AAA).

2. Warm Charcoal Stack

Same structure, warmer feel. Tailwind's stone family leans brown instead of blue — good for editorial sites, reading apps, and anything that should feel less "ops dashboard".

Roles mirror the slate stack: #0c0a09 page, #1c1917 cards, #292524 raised, #44403c borders, #d6d3d1 body text, #f5f5f4 headings. Warm ambers and oranges make natural accents here.

Contrast: body text #d6d3d1 on #0c0a09 = 13.26:1 (passes AAA) · headings #f5f5f4 on #0c0a09 = 18.11:1 (passes AAA).

3. Tinted Brand Dark

Instead of gray surfaces plus a brand accent, build the surfaces from the brand color. Starting from #2563eb (Tailwind blue-600), the dark surfaces below are its 85–95% shades — computed with the same channel math as the darken color tool — so the whole UI carries a faint blue cast that ties everything to the brand.

#02050c page, #040a17 cards, #060f23 raised, #0b1e47 borders. The untouched base #2563eb is the accent, its 20% tint #5182ef the hover, and the 85% tint #dee8fc serves as blue-cast text. Swap in your own brand hex and recompute the same percentages.

Contrast: text #dee8fc on #02050c = 16.56:1 (passes AAA) · white on the #2563eb accent = 5.17:1 — passes AA for normal text but not AAA, so keep white-on-accent for buttons and large text.

4. Monochrome Green Terminal

A single-hue theme built entirely from tints and shades of #2d6a4f, a forest green. Everything on screen shares one hue — the phosphor-terminal look, minus the eye strain.

#040b08 page, #0b1b14 panels, #173528 borders and rules, #6c9784 for prompts and accents, #cbdad3 for output text. The full ramp lives on the #2d6a4f color page.

Contrast: text #cbdad3 on #040b08 = 13.73:1 (passes AAA) · accent #6c9784 on #040b08 = 6.06:1 — passes AA for normal text and AAA for large text, but not AAA for body copy, so use it as an accent rather than a paragraph color.

Why Dark Mode Isn't Just Inverted Colors

Flipping a light theme produces a bad dark theme for three concrete reasons:

• Avoid pure black surfaces. With #000000 as your base there is nowhere darker to go, so elevation collapses — every layer needs a step below it, which is why the palettes above start at values like #020617 and #0c0a09 instead of black. In dark mode, higher surfaces get lighter, not shadowed.
• Dial back large light text. Pure white on pure black measures 21:1 — the maximum — and long passages at that contrast feel glary. A high-value gray like #e5e5e5 on #171717 still measures 14.23:1, double the AAA threshold, and is far more comfortable. Save near-white for headings.
• Desaturate and lighten accents. Saturated brand colors that pop on white can vibrate against dark surfaces. A tint of the brand color (like #5182ef above) usually sits better than the raw value.

How to Build Your Own From Any Brand Hex

1. Paste your brand hex into the shade generator and take the 85%, 90%, and 95% steps as raised, surface, and background — the same recipe as palette 3. The darken color tool gives finer 10%-step control.
2. Keep the untouched brand color as the accent, and a 15–25% tint of it as the hover state.
3. Pick body text around 75–85% tint of the brand hue (or a neutral like #cbd5e1), then verify the text-on-background pair in the contrast checker — aim for 7:1 (AAA) for body copy, and accept 4.5:1 (AA) only for short or large text.
4. Preview the whole set side by side in the color explorer before shipping.

Monochrome Hex Codes: A Neutral Gray Ramp

Sometimes you don't want any hue at all. Tailwind's neutral family is a true monochrome ramp — equal R, G, and B at every step, no warm or cool cast. The dark end makes hue-free dark themes; the full ramp, from #0a0a0a to #fafafa:

The extremes pair at #fafafa on #0a0a0a = 18.97:1 (passes AAA). A typical dark stack from this ramp: #0a0a0a background, #171717 surface, #262626 raised, #404040 borders, #e5e5e5 text.

Frequently Asked Questions

• What colors should I use for a dark mode background?

  Not pure black. Very dark grays work better: #020617 (slate-950), #0c0a09 (stone-950), or #171717 (neutral-900) as the page background, with slightly lighter steps like #0f172a or #1c1917 for cards. Pure #000000 leaves no room for darker elevation steps beneath it and makes light text feel harsher than it needs to be.

• What is a dark mode color palette?

  A coordinated set of colors for a dark interface: a near-black page background, one or two slightly lighter surface colors for cards and raised elements, a border color, light text colors, and an accent. The palettes on this page provide all of those roles as copyable hex codes with verified WCAG contrast ratios.

• How do I make my brand color work in dark mode?

  Keep the brand color as the accent and build the dark surfaces from deep shades of it. For #2563eb, 85–95% shades give #060f23, #040a17, and #02050c — dark surfaces that still carry the brand hue — with a 20% tint (#5182ef) for hover states. The shade generator computes these steps from any hex code.

• What text color should I use on dark backgrounds?

  Not pure white. High-value grays are easier on the eyes and still pass AAA comfortably: #e5e5e5 on #171717 is 14.23:1, #cbd5e1 on #020617 is 13.59:1, and #d6d3d1 on #0c0a09 is 13.26:1 — all well above the 7:1 AAA threshold. Reserve near-whites like #f1f5f9 for headings and emphasis.

• Are these dark mode palettes accessible?

  For body text, yes: every body-text pairing on this page was checked with the WCAG contrast formula and lands between 13.26:1 and 16.56:1 — all passing AAA (7:1) — with heading pairs reaching 18.97:1. Two accent pairings are AA-level: white on the #2563eb accent is 5.17:1 and the green accent #6c9784 on #040b08 is 6.06:1 — both pass AA for normal text but not AAA, so use them for buttons, prompts, and large text rather than long body copy. You can re-verify any pair in the contrast checker.