Popular Black Background Combinations
Green and Black
Tech-savvy, natural, ideal for eco and cyber themes
Explore Green & BlackPurple and Black
Luxurious, creative, perfect for premium brands
Explore Purple & BlackBlack Smoke Effect
Atmospheric, cinematic, great for hero sections and game UI
Explore Smoke & BlackSilver and Black
Elegant, modern, ideal for minimalist designs. The same approach is covered as a neutral palette in our dark backgrounds guide.
Sample CSS belowbackground: linear-gradient(135deg, #c0c0c0 0%, #000 100%);Pink and Black
Playful, high-contrast, often used in fashion and editorial layouts.
background: linear-gradient(135deg, #ff3d8a 0%, #000 70%);Cyan and Black
Cool, futuristic, common in dashboards and dev tooling.
background: radial-gradient(circle at 30% 30%, #00e5ff 0%, #000 65%);Orange and Black
Warm, energetic, frequent in sports and creative-agency sites.
background: linear-gradient(135deg, #ff7a00 0%, #1a0a00 100%);Yellow and Black
Maximum contrast — used for warnings, calls to attention, and bold posters. Verify legibility with the contrast guidance in our accessible dark backgrounds page.
background: linear-gradient(180deg, #ffd700 0%, #000 100%);White and Black
The classic monochrome pairing — works for editorial, photography, and minimalist UI.
background: linear-gradient(180deg, #fff 0%, #000 100%);Teal and Black
Balanced and calm — common in healthcare, education, and finance interfaces.
background: linear-gradient(135deg, #008080 0%, #000 80%);Colours That Work With a Black Background
What is a good foreground colour when the background is black? Any colour that is light enough to clear the WCAG contrast thresholds: 4.5:1 for normal body text (AA), 3:1 for large text (24px, or 18.66px bold) and UI components, and 7:1 for AAA body text. The ratios below were calculated with the WCAG 2 relative-luminance formula against pure black (#000000).
| Colour | Hex | Contrast vs #000 | Best use |
|---|---|---|---|
| White | #FFFFFF | 21:1 (AAA) | Headings, maximum emphasis |
| Light grey | #E0E0E0 | 15.91:1 (AAA) | Body text (softer than pure white) |
| Cyan | #00FFFF | 16.75:1 (AAA) | Links, highlights, tech/dashboard UI |
| Neon green | #39FF14 | 15.49:1 (AAA) | Terminal / cyberpunk accents |
| Gold | #FFD700 | 14.97:1 (AAA) | Premium accents, buttons |
| Orange | #FFA500 | 10.63:1 (AAA) | Calls to action, warnings |
| Light blue | #4FC3F7 | 10.48:1 (AAA) | Links on black (instead of pure blue) |
| Metallic gold | #D4AF37 | 9.99:1 (AAA) | Luxury branding, borders, headings |
| Soft purple | #BB86FC | 7.93:1 (AAA) | Primary accent in dark themes |
| Coral red | #FF6B6B | 7.57:1 (AAA) | Readable red for text and errors |
| Pure red | #FF0000 | 5.25:1 (AA only) | Accents and large text; prefer coral for long text |
| Pure blue | #0000FF | 2.44:1 (fails) | Accent fills / decoration only, never text |
| Maroon | #800000 | 1.92:1 (fails) | Background panels or accent fills only, never text |
Best colour for a black background
For text, use white or a light grey such as #E0E0E0. For accents, pick one bright hue (gold, cyan, soft purple or light blue) and use it sparingly. Dark, saturated colours such as maroon, navy or pure blue blend into black, so keep them for large fills, not text.
Maroon, black and gold
Maroon (#800000) fails as text on black, so use it as a panel or band colour and put the gold on top: #D4AF37 on #800000 is 5.21:1 and #FFD700 on #800000 is 7.81:1. On the black areas, gold works for text too (9.99:1 and 14.97:1).
Off-black (#121212) vs pure black
Pure #000 gives the highest contrast and turns OLED pixels off. Off-black like #121212 (the Material Design dark-theme surface colour) is a little softer, lets shadows and raised surfaces show, and still gives white text 18.73:1. Both are valid; pick off-black for long reading and pure black when you want the deepest look.
Full palettes with contrast checks: red and black, blue and black, green and black, purple and black and black and gold. For accessibility details, see accessible dark backgrounds, test any pair with the contrast checker, or pick a softer base from the shades of black.
Gradient Showcase
Design Tips for Black Backgrounds
🎨 Color Vibrancy
Colors appear more vibrant against black backgrounds. Use this to your advantage by choosing slightly desaturated colors for a balanced look.
📖 Text Readability
Ensure sufficient contrast for text. Use white (#ffffff) or light gray (#e0e0e0) for body text, and bright colors for headings and accents.
🌟 Depth and Layers
Create depth using different shades of black (#000000, #111111, #1a1a1a) and subtle shadows to separate UI elements.
💡 Accent Colors
Use bright accent colors sparingly for maximum impact. Neon colors work exceptionally well on black backgrounds.
🔄 Gradients
Gradients from color to black create smooth transitions and add visual interest without overwhelming the design.
👁️ Eye Comfort
Pure black (#000000) can be harsh. Consider using very dark grays (#0a0a0a) for extended reading experiences.
Interactive Color Combination Demo
Click on a color to see how it combines with black
Sample Text
This is how your content looks with this color combination
Quick CSS Examples
/* Set your accent once, e.g. :root { --accent: #ffd700; } */
/* Linear Gradient */
background: linear-gradient(135deg, var(--accent) 0%, #000000 100%);
/* Radial Gradient */
background: radial-gradient(circle, var(--accent) 0%, #000000 70%);
/* Multiple Gradients */
background:
radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.3) 0%, transparent 50%),
linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
/* Animated Gradient */
background: linear-gradient(90deg, #000000 0%, var(--accent) 50%, #000000 100%);
background-size: 200% 100%; /* needed so background-position can move */
animation: slideGradient 3s ease-in-out infinite;
@keyframes slideGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}