Black Color Code: HEX #000000, Variations & Dark Mode Design
Master Black color: from true black to off-black variations. Complete guide for dark mode, typography, and accessibility.
The Power of True Black (#000000) vs. Off-Black
While True Black (HEX #000000) is the foundation of digital design, modern UX experts often prefer "Off-Black" or "Rich Black" (#1A1A1A) to reduce eye strain and improve readability on OLED screens. Black symbolizes authority, elegance, and mystery. In our 2026 design toolkit, we provide codes for various types of black, including Eerie Black, Jet, and Onyx.
Pure black creates maximum contrast but can be harsh for extended viewing. Off-Black shades like #121212 provide enough darkness for the dark mode aesthetic while allowing for subtle depth perception through elevation and shadows. This nuance is what separates amateur dark themes from professional implementations.
Visual Comparison: Pure Black vs Off-Black
Notice how Off-Black allows for subtle depth while maintaining the dark aesthetic
Black in Typography and Dark Mode
Implementing a successful Dark Mode requires more than just a black background. Using a slightly desaturated black (like #121212) allows for better depth perception through shadows and elevation. Our Black color guide helps you choose the right saturation to maintain premium aesthetics while ensuring AAA contrast ratios for accessibility.
For typography, Pure Black (#000000) on white achieves a contrast ratio of 21:1—the maximum possible. However, for body text, designers often prefer Charcoal Black (#333333) which still provides excellent readability (16.75:1) while reducing the harshness of pure black. This subtle difference can significantly impact reading comfort during extended use.
WCAG Contrast Ratios for Black
Professional Black Color Palettes
Sophisticated black color schemes for luxury brands, modern dark mode, and minimalist design. Each palette is tested for depth, contrast, and premium appeal.
Premium Luxury Dark Mode
luxuryLuxurious Obsidian Black base with Rich Black elevation and Gold accents. Perfect for premium brands, luxury e-commerce, and high-end services.
#0B0B0B#1A1A1A#FFD700#FFFFFFModern Material Dark
modernMaterial Design compliant Off-Black with elevation system. Purple and teal accents create a modern, accessible dark theme perfect for apps and SaaS platforms.
#121212#1E1E1E#BB86FC#03DAC6Minimalist Monochrome
minimalistPure black to white monochromatic palette with strategic gray stops. Ideal for editorial design, fashion brands, and minimalist websites.
#000000#333333#666666#FFFFFFPopular Variations of Black
Four essential black variations for professional design, from absolute darkness to sophisticated dark grays.
Pure Black
AbsoluteTrue black - absolute darkness for high-contrast borders and text
Rich Black
LuxuryObsidian black with subtle depth for premium branding
Off-Black
ModernMaterial Design standard - reduces eye strain on OLED screens
Charcoal Black
SoftStandard for readable body text with reduced harshness
Extended Black Spectrum
A comprehensive range of black shades from pure white to absolute black:
Best Black Color Combinations
These colors pair beautifully with black for various design contexts:
White
Ultimate contrast for readability
Gold
Luxury pairing for premium brands
Silver
Sleek, modern metallic harmony
Coral
Vibrant accent for dark themes
Black Color Meaning & Psychology
Authority & Power
Black commands respect and conveys authority. It's the color of luxury brands, high-end fashion, and premium services. Black suggests sophistication and exclusivity, making it perfect for brands that want to project power and prestige.
Elegance & Mystery
Black creates an aura of mystery and elegance. It hides what's beneath, creating intrigue and fascination. This quality makes black ideal for luxury branding, where the allure of the unknown adds to the premium appeal.
Timelessness & Versatility
Black never goes out of style. It's the quintessential neutral that works with any color, any era, any aesthetic. This timelessness makes black a safe yet sophisticated choice for brands that want lasting appeal.
Focus & Clarity
In UI design, black creates focus by eliminating distractions. Dark mode interfaces reduce eye strain and help users concentrate on content. This makes black essential for productivity tools, reading apps, and focus-oriented interfaces.
Best Practices for Black Design
Prefer Off-Black for Large Surfaces
Use #121212 or #1A1A1A for backgrounds and large surface areas instead of Pure Black. This reduces eye strain, allows for depth through elevation, and feels more premium while maintaining the dark aesthetic.
Create Depth with Elevation
Dark mode requires elevation for hierarchy. Use multiple shades of black (#121212, #1E1E1E, #2C2C2C) to create layers. Cards should be lighter than backgrounds, and raised elements lighter still. This depth is crucial for usable dark interfaces.
Test for OLED Smearing
Pure black can cause "smearing" on OLED screens during scrolling. Test your dark mode on actual devices and consider using Off-Black to minimize this artifact. Your users with OLED phones will thank you.
Maintain Accessibility Standards
Black on white always passes WCAG, but dark mode requires careful testing. Ensure text on dark backgrounds meets at least 4.5:1 contrast ratio for normal text and 3:1 for large text. Use our Contrast Checker to verify compliance.
CSS Black Gradient Code
Copy and paste these CSS gradients to achieve sophisticated black effects for dark mode and premium design:
Classic Black Gradient
background: linear-gradient(
135deg,
#000000 0%,
#1A1A1A 50%,
#333333 100%
);Subtle Dark Mode Elevation
background: linear-gradient(
180deg,
#121212 0%,
#1E1E1E 50%,
#2C2C2C 100%
);Tailwind CSS Custom Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'black-gradient': 'linear-gradient(135deg, #000000 0%, #1A1A1A 50%, #333333 100%)',
}
}
}
}Quick Reference Table
| Name | HEX | RGB | Category |
|---|---|---|---|
| Pure Black | #000000 | rgb(0, 0, 0) | Absolute |
| Rich Black | #0B0B0B | rgb(11, 11, 11) | Luxury |
| Off-Black | #121212 | rgb(18, 18, 18) | Modern |
| Charcoal Black | #333333 | rgb(51, 51, 51) | Soft |
Frequently Asked Questions
Why avoid HEX #000000 in Dark Mode?
Pure black (#000000) can cause "black smearing" on OLED screens and create excessive contrast that leads to eye fatigue. Designers often use #121212 for a smoother experience.
What is Rich Black?
Rich Black is an ink mixture used in printing to achieve a deeper, more saturated black than standard ink alone. In digital design, it translates to very dark blue or brown-tinted blacks.
Master Premium Dark Mode Design
Ready to create sophisticated dark interfaces? Use our professional tools to design accessible, premium black color schemes.
Explore Our Color Library
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.