Color palettes for dark UI — what works in 2026

Pure black background (#000) is wrong for most apps. Hurts eyes on OLED, makes typography look harsh, removes texture.

Better approach — warm dark with a hint of color (we use #1a1410, brown-tinted dark). Foreground slightly off-white. One accent, one accent-hover.

Eight-step recipe:

• Background: warm dark, slight tint (brown, blue, green)
• Background-2: 10-15% lighter for cards
• Border: 25% lighter than background
• Foreground: off-white with the same tint as background
• Foreground-dim: 55% opacity foreground
• Foreground-mute: 35% opacity foreground
• Accent: warm color (orange, red, gold)
• Accent-hi: 10% lighter accent for hover

This template works for our site, three SaaS dashboards and two e-commerce shops.