Black: #000000 HEX Code & Design Guide
Learn Black color: from true black to off-black variations. 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 give you enough darkness for the dark mode look while still allowing depth through elevation and shadows. That's a small detail that makes a big difference.
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
Building a good Dark Mode takes more than just a black background. Using a slightly desaturated black (like #121212) gives you better depth through shadows and elevation. Our guide helps you choose the right shade to look great while hitting AAA contrast ratios for accessibility.
For typography, Pure Black (#000000) on white hits a contrast ratio of 21:1 -- the maximum possible. But for body text, many designers prefer Charcoal Black (#333333), which still reads well (16.75:1) while feeling less harsh. It's a small change that makes a real difference during long reading sessions.
WCAG Contrast Ratios for Black
Professional Black Color Palettes
Black color schemes for luxury brands, modern dark mode, and minimalist design. Each palette is tested for depth, contrast, and overall look.
Premium Luxury Dark Mode
luxuryLuxurious Obsidian Black base with Rich Black elevation and Gold accents. A strong fit 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 suited for apps and SaaS.
#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 deep 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 well with black for various design contexts:
White
Ultimate contrast for readability
Gold
Luxury pairing for premium brands
Silver
Sleek, modern metallic harmony
Coral
Warm accent for dark themes
Black Color Meaning & Psychology
Authority & Power
Black carries weight and conveys authority. It's the color of luxury brands, high-end fashion, and premium services. Black feels exclusive and refined, making it a strong pick for brands that want to project power and prestige.
Elegance & Mystery
Black has a mysterious, elegant quality. It hides what's beneath, creating intrigue. That's why it works so well for luxury branding -- the sense of something hidden adds to the premium feel.
Timelessness & Versatility
Black never goes out of style. It's the classic neutral that works with any color, any era, any aesthetic. That's what makes black a reliable pick for brands that want lasting appeal.
Focus & Clarity
In UI design, black creates focus by cutting distractions. Dark mode interfaces reduce eye strain and help users concentrate on content. That's why it's so common in 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 for dark mode and premium black effects:
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
What is the meaning of "Saturated Black"?
Saturated black (or Pure Black) is the absolute darkest color in the digital space with a HEX code of #000000. It represents authority, luxury, and provides maximum contrast.
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.
Dark Mode Design Guide
Try these black palettes in your next dark mode project. Our tools help you design accessible, good-looking dark interfaces.
Explore Our Color Library
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.