Black Color Palette: 6 Elegant Dark Schemes with Hex Codes

Black is the most dramatic tool in design — the color of luxury, authority and focus. But a great black color palette is almost never pure black. Professional dark designs are built from layered charcoals, soft blacks and one carefully chosen accent — and that layering is exactly what separates a premium dark UI from a flat void.

Here are six black palettes with hex codes and copy-paste CSS, including dark-mode-ready sets. Pair them with the grey palette guide, or browse the full PaletteCSS library.

Why designers avoid pure #000000

Pure black on pure white creates the harshest possible contrast (21:1) — enough to cause eye strain and visual "vibration" around text. Real-world blacks (fabric, ink, shadow) are never absolute either, so near-blacks like #121212 or #1A1A1A look richer and more natural. That's why Material Design's dark theme is built on #121212, not #000.

• True black — reserved for OLED-friendly apps and maximum drama.
• Soft black / charcoal — the everyday "black" of good design.
• Tinted blacks — blacks with a blue, green or brown undertone add mood.

6 black color palettes (with hex codes)

1. Classic Monochrome

The timeless black-to-white ladder.

#111111 · #3A3A3A · #7A7A7A · #C9C9C9 · #F5F5F5

2. Dark Mode UI

Material-style layered surfaces.

#121212 · #1E1E1E · #2C2C2C · #8A8A8A · #E4E4E4

3. Black & Gold

The luxury standard.

#121212 · #2A2318 · #D4A017 · #F1DFA8 · #FAF7EF

4. Midnight Blue-Black

Black with a cool blue undertone — softer than neutral black.

#0D1117 · #161B26 · #2C3444 · #8B96A8 · #E6EAF0

5. Black & Crimson

High drama for bold brands.

#141414 · #2A1A1C · #C4162E · #F4A3AD · #F7F4F4

6. Warm Black

Brown-tinted blacks — cozy instead of stark.

#171310 · #2C2620 · #584E42 · #A6988A · #F0EAE2

How to use black palettes in CSS

Dark interfaces are built as elevation layers — each surface slightly lighter than the one below:

:root {
  --bg:        #121212;  /* page */
  --surface:   #1E1E1E;  /* cards */
  --surface-2: #2C2C2C;  /* raised elements */
  --text:      #E4E4E4;
  --text-muted:#8A8A8A;
}

Avoid pure white text on dark — soft white #E4E4E4 is easier on the eyes.

Tips for designing with black

• Layer, don't flatten. Use 2–3 dark greys as elevation steps; a single flat black kills depth.
• One accent is enough. Gold, crimson or electric blue — black makes any accent glow, so you only need one.
• Soften both ends. Near-black #121212 plus off-white #E4E4E4 beats #000 on #FFF for comfort.
• Mind contrast in reverse. Muted text on dark backgrounds still needs 4.5:1 — check your greys.

Frequently asked questions

What is a good black hex code?

For interfaces, use a near-black like #121212 or #1A1A1A instead of pure #000000 — it looks richer and reduces eye strain.

What colors go with black?

Black pairs with everything, but shines with gold, crimson, white, and soft greys. For dark UIs, one bright accent color against layered charcoals works best.

Should I use pure black for dark mode?

Usually no — layered dark greys (#121212 base, lighter surfaces above) create depth and are easier to read. Pure black suits OLED battery-saving designs.

Keep exploring: browse dark color palettes, see the grey palette guide, or copy a dark gradient in one click.